Skip to content

Commit

Permalink
Charts - Updating examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@grzegorz-cp
grzegorz-cp committed Dec 13, 2024
1 parent efbe8a0 commit 14ca95e
Show file tree
Hide file tree
Showing 2 changed files with 198 additions and 3 deletions.
29 changes: 29 additions & 0 deletions projects/js-packages/charts/src/components/line-chart/stories/index.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,39 @@ export default {

const Template = args => <LineChart { ...args } />;

// Default story with multiple series
export const Default = Template.bind( {} );
Default.args = {
width: 500,
height: 300,
margin: { top: 20, right: 20, bottom: 30, left: 40 },
data: sampleData,
};

// Story with single data series
export const SingleSeries = Template.bind( {} );
SingleSeries.args = {
width: 500,
height: 300,
margin: { top: 20, right: 20, bottom: 30, left: 40 },
data: [ sampleData[ 0 ] ], // Only London temperature data
};

// Story without tooltip
export const WithoutTooltip = Template.bind( {} );
WithoutTooltip.args = {
width: 500,
height: 300,
margin: { top: 20, right: 20, bottom: 30, left: 40 },
data: sampleData,
withTooltips: false,
};

// Story with custom dimensions
export const CustomDimensions = Template.bind( {} );
CustomDimensions.args = {
width: 800,
height: 400,
margin: { top: 20, right: 20, bottom: 30, left: 40 },
data: sampleData,
};
172 changes: 169 additions & 3 deletions projects/js-packages/charts/src/components/line-chart/stories/sample-data.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,65 @@
// Data from UK Met Office (London/Heathrow), Australian Bureau of Meteorology (Canberra),
// and NASA Mars Curiosity Rover (Gale Crater)
const temperatureData = [
import type { SeriesData } from '../../shared/types';

// Sample data
const temperatureData: SeriesData[] = [
{
label: 'London',
data: [
// 2022 data
{ date: new Date( '2022-01-01' ), value: 7.8 },
{ date: new Date( '2022-01-08' ), value: 7.2 },
{ date: new Date( '2022-01-15' ), value: 6.9 },
{ date: new Date( '2022-01-22' ), value: 6.5 },
{ date: new Date( '2022-01-29' ), value: 7.1 },
{ date: new Date( '2022-02-05' ), value: 8.3 },
{ date: new Date( '2022-02-12' ), value: 8.9 },
{ date: new Date( '2022-02-19' ), value: 9.2 },
{ date: new Date( '2022-02-26' ), value: 8.7 },
{ date: new Date( '2022-03-05' ), value: 9.4 },
{ date: new Date( '2022-03-12' ), value: 10.2 },
{ date: new Date( '2022-03-19' ), value: 11.5 },
{ date: new Date( '2022-03-26' ), value: 12.3 },
{ date: new Date( '2022-04-02' ), value: 13.1 },
{ date: new Date( '2022-04-09' ), value: 13.8 },
{ date: new Date( '2022-04-16' ), value: 14.6 },
{ date: new Date( '2022-04-23' ), value: 15.2 },
{ date: new Date( '2022-04-30' ), value: 15.9 },
{ date: new Date( '2022-05-07' ), value: 16.7 },
{ date: new Date( '2022-05-14' ), value: 17.4 },
{ date: new Date( '2022-05-21' ), value: 18.2 },
{ date: new Date( '2022-05-28' ), value: 18.9 },
{ date: new Date( '2022-06-04' ), value: 19.7 },
{ date: new Date( '2022-06-11' ), value: 20.5 },
{ date: new Date( '2022-06-18' ), value: 21.3 },
{ date: new Date( '2022-06-25' ), value: 22.1 },
{ date: new Date( '2022-07-02' ), value: 22.8 },
{ date: new Date( '2022-07-09' ), value: 23.6 },
{ date: new Date( '2022-07-16' ), value: 24.4 },
{ date: new Date( '2022-07-23' ), value: 25.2 },
{ date: new Date( '2022-07-30' ), value: 24.8 },
{ date: new Date( '2022-08-06' ), value: 24.1 },
{ date: new Date( '2022-08-13' ), value: 23.5 },
{ date: new Date( '2022-08-20' ), value: 22.8 },
{ date: new Date( '2022-08-27' ), value: 21.9 },
{ date: new Date( '2022-09-03' ), value: 20.7 },
{ date: new Date( '2022-09-10' ), value: 19.5 },
{ date: new Date( '2022-09-17' ), value: 18.3 },
{ date: new Date( '2022-09-24' ), value: 17.1 },
{ date: new Date( '2022-10-01' ), value: 16.2 },
{ date: new Date( '2022-10-08' ), value: 15.1 },
{ date: new Date( '2022-10-15' ), value: 14.2 },
{ date: new Date( '2022-10-22' ), value: 13.1 },
{ date: new Date( '2022-10-29' ), value: 12.2 },
{ date: new Date( '2022-11-05' ), value: 11.1 },
{ date: new Date( '2022-11-12' ), value: 10.2 },
{ date: new Date( '2022-11-19' ), value: 9.1 },
{ date: new Date( '2022-11-26' ), value: 8.2 },
{ date: new Date( '2022-12-03' ), value: 7.1 },
{ date: new Date( '2022-12-10' ), value: 6.2 },
{ date: new Date( '2022-12-17' ), value: 5.5 },
{ date: new Date( '2022-12-24' ), value: 5.2 },
{ date: new Date( '2022-12-31' ), value: 6.8 },
// 2023 data
{ date: new Date( '2023-01-01' ), value: 8.2 },
{ date: new Date( '2023-01-08' ), value: 7.9 },
{ date: new Date( '2023-01-15' ), value: 5.1 },
Expand Down Expand Up @@ -62,6 +118,61 @@ const temperatureData = [
{
label: 'Canberra',
data: [
// 2022 data
{ date: new Date( '2022-01-01' ), value: 27.9 },
{ date: new Date( '2022-01-08' ), value: 28.4 },
{ date: new Date( '2022-01-15' ), value: 29.2 },
{ date: new Date( '2022-01-22' ), value: 28.9 },
{ date: new Date( '2022-01-29' ), value: 28.1 },
{ date: new Date( '2022-02-05' ), value: 27.3 },
{ date: new Date( '2022-02-12' ), value: 26.5 },
{ date: new Date( '2022-02-19' ), value: 25.4 },
{ date: new Date( '2022-02-26' ), value: 24.2 },
{ date: new Date( '2022-03-05' ), value: 23.1 },
{ date: new Date( '2022-03-12' ), value: 22.3 },
{ date: new Date( '2022-03-19' ), value: 21.2 },
{ date: new Date( '2022-03-26' ), value: 20.1 },
{ date: new Date( '2022-04-02' ), value: 19.2 },
{ date: new Date( '2022-04-09' ), value: 18.1 },
{ date: new Date( '2022-04-16' ), value: 16.9 },
{ date: new Date( '2022-04-23' ), value: 15.8 },
{ date: new Date( '2022-04-30' ), value: 14.9 },
{ date: new Date( '2022-05-07' ), value: 13.8 },
{ date: new Date( '2022-05-14' ), value: 12.9 },
{ date: new Date( '2022-05-21' ), value: 11.8 },
{ date: new Date( '2022-05-28' ), value: 10.9 },
{ date: new Date( '2022-06-04' ), value: 9.8 },
{ date: new Date( '2022-06-11' ), value: 8.9 },
{ date: new Date( '2022-06-18' ), value: 8.1 },
{ date: new Date( '2022-06-25' ), value: 7.5 },
{ date: new Date( '2022-07-02' ), value: 6.9 },
{ date: new Date( '2022-07-09' ), value: 6.7 },
{ date: new Date( '2022-07-16' ), value: 7.1 },
{ date: new Date( '2022-07-23' ), value: 7.9 },
{ date: new Date( '2022-07-30' ), value: 8.8 },
{ date: new Date( '2022-08-06' ), value: 9.9 },
{ date: new Date( '2022-08-13' ), value: 11.2 },
{ date: new Date( '2022-08-20' ), value: 12.4 },
{ date: new Date( '2022-08-27' ), value: 13.6 },
{ date: new Date( '2022-09-03' ), value: 14.8 },
{ date: new Date( '2022-09-10' ), value: 16.1 },
{ date: new Date( '2022-09-17' ), value: 17.3 },
{ date: new Date( '2022-09-24' ), value: 18.5 },
{ date: new Date( '2022-10-01' ), value: 19.8 },
{ date: new Date( '2022-10-08' ), value: 21.1 },
{ date: new Date( '2022-10-15' ), value: 22.3 },
{ date: new Date( '2022-10-22' ), value: 23.5 },
{ date: new Date( '2022-10-29' ), value: 24.6 },
{ date: new Date( '2022-11-05' ), value: 25.7 },
{ date: new Date( '2022-11-12' ), value: 26.5 },
{ date: new Date( '2022-11-19' ), value: 27.4 },
{ date: new Date( '2022-11-26' ), value: 28.2 },
{ date: new Date( '2022-12-03' ), value: 28.9 },
{ date: new Date( '2022-12-10' ), value: 29.5 },
{ date: new Date( '2022-12-17' ), value: 29.1 },
{ date: new Date( '2022-12-24' ), value: 28.2 },
{ date: new Date( '2022-12-31' ), value: 28.7 },
// 2023 data
{ date: new Date( '2023-01-01' ), value: 28.5 },
{ date: new Date( '2023-01-08' ), value: 29.2 },
{ date: new Date( '2023-01-15' ), value: 30.1 },
Expand Down Expand Up @@ -120,6 +231,61 @@ const temperatureData = [
{
label: 'Mars',
data: [
// 2022 data
{ date: new Date( '2022-01-01' ), value: -62 },
{ date: new Date( '2022-01-08' ), value: -63 },
{ date: new Date( '2022-01-15' ), value: -64 },
{ date: new Date( '2022-01-22' ), value: -62 },
{ date: new Date( '2022-01-29' ), value: -61 },
{ date: new Date( '2022-02-05' ), value: -59 },
{ date: new Date( '2022-02-12' ), value: -56 },
{ date: new Date( '2022-02-19' ), value: -53 },
{ date: new Date( '2022-02-26' ), value: -50 },
{ date: new Date( '2022-03-05' ), value: -47 },
{ date: new Date( '2022-03-12' ), value: -44 },
{ date: new Date( '2022-03-19' ), value: -41 },
{ date: new Date( '2022-03-26' ), value: -37 },
{ date: new Date( '2022-04-02' ), value: -34 },
{ date: new Date( '2022-04-09' ), value: -31 },
{ date: new Date( '2022-04-16' ), value: -27 },
{ date: new Date( '2022-04-23' ), value: -24 },
{ date: new Date( '2022-04-30' ), value: -21 },
{ date: new Date( '2022-05-07' ), value: -17 },
{ date: new Date( '2022-05-14' ), value: -14 },
{ date: new Date( '2022-05-21' ), value: -11 },
{ date: new Date( '2022-05-28' ), value: -7 },
{ date: new Date( '2022-06-04' ), value: -4 },
{ date: new Date( '2022-06-11' ), value: -1 },
{ date: new Date( '2022-06-18' ), value: 1 },
{ date: new Date( '2022-06-25' ), value: 3 },
{ date: new Date( '2022-07-02' ), value: 6 },
{ date: new Date( '2022-07-09' ), value: 9 },
{ date: new Date( '2022-07-16' ), value: 11 },
{ date: new Date( '2022-07-23' ), value: 13 },
{ date: new Date( '2022-07-30' ), value: 16 },
{ date: new Date( '2022-08-06' ), value: 18 },
{ date: new Date( '2022-08-13' ), value: 21 },
{ date: new Date( '2022-08-20' ), value: 23 },
{ date: new Date( '2022-08-27' ), value: 21 },
{ date: new Date( '2022-09-03' ), value: 19 },
{ date: new Date( '2022-09-10' ), value: 16 },
{ date: new Date( '2022-09-17' ), value: 13 },
{ date: new Date( '2022-09-24' ), value: 9 },
{ date: new Date( '2022-10-01' ), value: 6 },
{ date: new Date( '2022-10-08' ), value: 3 },
{ date: new Date( '2022-10-15' ), value: -1 },
{ date: new Date( '2022-10-22' ), value: -4 },
{ date: new Date( '2022-10-29' ), value: -7 },
{ date: new Date( '2022-11-05' ), value: -11 },
{ date: new Date( '2022-11-12' ), value: -14 },
{ date: new Date( '2022-11-19' ), value: -17 },
{ date: new Date( '2022-11-26' ), value: -21 },
{ date: new Date( '2022-12-03' ), value: -24 },
{ date: new Date( '2022-12-10' ), value: -27 },
{ date: new Date( '2022-12-17' ), value: -31 },
{ date: new Date( '2022-12-24' ), value: -36 },
{ date: new Date( '2022-12-31' ), value: -37 },
// 2023 data
{ date: new Date( '2023-01-01' ), value: -63 },
{ date: new Date( '2023-01-08' ), value: -64 },
{ date: new Date( '2023-01-15' ), value: -65 },
Expand Down

0 comments on commit 14ca95e

Please sign in to comment.