diff --git a/packages/angular/stories/all.stories.ts b/packages/angular/stories/all.stories.ts index 734ae539f9..c7748d3ab1 100644 --- a/packages/angular/stories/all.stories.ts +++ b/packages/angular/stories/all.stories.ts @@ -3,7 +3,7 @@ import { withKnobs, object } from "@storybook/addon-knobs"; import { ChartsModule } from "../src/charts.module"; -import { demoGroups } from "@carbon/charts/demo/data"; +import { storybookDemoGroups } from "@carbon/charts/demo/data"; const getTemplate = demo => `
@@ -38,7 +38,7 @@ const getTemplate = demo => ` `; // Loop through all demo groups -demoGroups.forEach(demoGroup => { +storybookDemoGroups.forEach(demoGroup => { // Create story group for each demo group const groupStories = storiesOf(demoGroup.title, module).addDecorator( withKnobs({ escapeHTML: false }) diff --git a/packages/core/demo/data/index.ts b/packages/core/demo/data/index.ts index 0ec3257fc2..7a891c9958 100644 --- a/packages/core/demo/data/index.ts +++ b/packages/core/demo/data/index.ts @@ -86,35 +86,33 @@ export const chartTypes = { let allDemoGroups = [ { title: "Area", + description: "Area charts are similar to line charts, but the areas below the lines are filled with colors or patterns. Stacked charts are useful for comparing proportional contributions within a category. They plot the relative value that each data series contributes to the total.", demos: [ { options: areaDemos.areaTimeSeriesCurvedOptions, data: areaDemos.areaTimeSeriesCurvedData, chartType: chartTypes.AreaChart, - isDemoExample: true, }, { options: areaDemos.areaTimeSeriesOptions, data: areaDemos.areaTimeSeriesData, chartType: chartTypes.AreaChart, - isDemoExample: true, }, ], }, { title: "Bar (vertical)", + description: "Bar charts use vertical or horizontal data markers to compare individual values. You can use them to compare discrete data or show trends over time.", demos: [ { options: barDemos.simpleBarOptions, data: barDemos.simpleBarData, chartType: chartTypes.SimpleBarChart, - isDemoExample: true, }, { options: barDemos.simpleBarTimeSeriesOptions, data: barDemos.simpleBarTimeSeriesData, chartType: chartTypes.SimpleBarChart, - isDemoExample: true, }, { options: barDemos.simpleBarFixedDomainOptions, @@ -125,55 +123,54 @@ let allDemoGroups = [ options: barDemos.simpleBarEmptyStateOptions, data: barDemos.simpleBarEmptyStateData, chartType: chartTypes.SimpleBarChart, - isDemoExample: true, + isDemoExample: false, }, { options: barDemos.simpleBarSkeletonOptions, data: barDemos.simpleBarSkeletonData, chartType: chartTypes.SimpleBarChart, - isDemoExample: true, + isDemoExample: false, }, { + description: "A grouped bar chart, also known as a clustered bar graph, multi-set bar chart, or grouped column chart, is a type of bar graph that is used to compare values across multiple categories.", options: barDemos.groupedBarOptions, data: barDemos.groupedBarData, chartType: chartTypes.GroupedBarChart, - isDemoExample: true, }, { options: barDemos.groupedBarEmptyStateOptions, data: barDemos.groupedBarEmptyStateData, chartType: chartTypes.GroupedBarChart, - isDemoExample: true, + isDemoExample: false, }, { options: barDemos.groupedBarSkeletonOptions, data: barDemos.groupedBarSkeletonData, chartType: chartTypes.GroupedBarChart, - isDemoExample: true, + isDemoExample: false, }, { + description: "Stacked bar charts are useful for comparing proportional contributions within a category. They plot the relative value that each data series contributes to the total.", options: barDemos.stackedBarOptions, data: barDemos.stackedBarData, chartType: chartTypes.StackedBarChart, - isDemoExample: true, }, { options: barDemos.stackedBarTimeSeriesOptions, data: barDemos.stackedBarTimeSeriesData, chartType: chartTypes.StackedBarChart, - isDemoExample: true, }, { options: barDemos.stackedBarEmptyStateOptions, data: barDemos.stackedBarEmptyStateData, chartType: chartTypes.StackedBarChart, - isDemoExample: true, + isDemoExample: false, }, { options: barDemos.stackedBarSkeletonOptions, data: barDemos.stackedBarSkeletonData, chartType: chartTypes.StackedBarChart, - isDemoExample: true, + isDemoExample: false, }, ], }, @@ -184,102 +181,95 @@ let allDemoGroups = [ options: barDemos.simpleHorizontalBarOptions, data: barDemos.simpleHorizontalBarData, chartType: chartTypes.SimpleBarChart, - isDemoExample: true, }, { options: barDemos.simpleHorizontalBarTimeSeriesOptions, data: barDemos.simpleHorizontalBarTimeSeriesData, chartType: chartTypes.SimpleBarChart, - isDemoExample: true, }, { options: barDemos.simpleHorizontalBarEmptyStateOptions, data: barDemos.simpleHorizontalBarEmptyStateData, chartType: chartTypes.SimpleBarChart, - isDemoExample: true, + isDemoExample: false, }, { options: barDemos.simpleHorizontalBarSkeletonOptions, data: barDemos.simpleHorizontalBarSkeletonData, chartType: chartTypes.SimpleBarChart, - isDemoExample: true, + isDemoExample: false, }, { options: barDemos.groupedHorizontalBarOptions, data: barDemos.groupedHorizontalBarData, chartType: chartTypes.GroupedBarChart, - isDemoExample: true, }, { options: barDemos.groupedHorizontalBarEmptyStateOptions, data: barDemos.groupedHorizontalBarEmptyStateData, chartType: chartTypes.GroupedBarChart, - isDemoExample: true, + isDemoExample: false, }, { options: barDemos.groupedHorizontalBarSkeletonOptions, data: barDemos.groupedHorizontalBarSkeletonData, chartType: chartTypes.GroupedBarChart, - isDemoExample: true, + isDemoExample: false, }, { options: barDemos.stackedHorizontalBarOptions, data: barDemos.stackedHorizontalBarData, chartType: chartTypes.StackedBarChart, - isDemoExample: true, }, { options: barDemos.stackedHorizontalBarTimeSeriesOptions, data: barDemos.stackedHorizontalBarTimeSeriesData, chartType: chartTypes.StackedBarChart, - isDemoExample: true, }, { options: barDemos.stackedHorizontalBarEmptyStateOptions, data: barDemos.stackedHorizontalBarEmptyStateData, chartType: chartTypes.StackedBarChart, - isDemoExample: true, + isDemoExample: false, }, { options: barDemos.stackedHorizontalBarSkeletonOptions, data: barDemos.stackedHorizontalBarSkeletonData, chartType: chartTypes.StackedBarChart, - isDemoExample: true, + isDemoExample: false, }, ], }, { title: "Bubble", + description: "Bubble charts use data points and bubbles to plot measures anywhere along a scale. One measure is plotted along each axis. The size of the bubble represents the third measure. You can use bubble charts to represent financial data or any data where measured values are related.", demos: [ { options: bubbleDemos.bubbleDoubleLinearOptions, data: bubbleDemos.bubbleDoubleLinearData, chartType: chartTypes.BubbleChart, - isDemoExample: true, }, { options: bubbleDemos.bubbleTimeSeriesOptions, data: bubbleDemos.bubbleTimeSeriesData, chartType: chartTypes.BubbleChart, - isDemoExample: true, }, { options: bubbleDemos.bubbleDiscreteOptions, data: bubbleDemos.bubbleDiscreteData, chartType: chartTypes.BubbleChart, - isDemoExample: true, }, { options: bubbleDemos.bubbleEmptyStateOptions, data: bubbleDemos.bubbleEmptyStateData, chartType: chartTypes.BubbleChart, - isDemoExample: true, + isDemoExample: false, }, { options: bubbleDemos.bubbleSkeletonOptions, data: bubbleDemos.bubbleSkeletonData, chartType: chartTypes.BubbleChart, - isDemoExample: true, + isDemoExample: false, }, ], }, @@ -290,30 +280,29 @@ let allDemoGroups = [ options: donutDemos.donutOptions, data: donutDemos.donutData, chartType: chartTypes.DonutChart, - isDemoExample: true, }, { options: donutDemos.donutEmptyStateOptions, data: donutDemos.donutEmptyStateData, chartType: chartTypes.DonutChart, - isDemoExample: true, + isDemoExample: false, }, { options: donutDemos.donutSkeletonOptions, data: donutDemos.donutSkeletonData, chartType: chartTypes.DonutChart, - isDemoExample: true, + isDemoExample: false, }, ], }, { title: "Line", + description: "Line charts plot data at regular intervals connected by lines. You can use line visualizations to show trends over time and compare several data sets.", demos: [ { options: lineDemos.lineTimeSeriesOptions, data: lineDemos.lineTimeSeriesData, chartType: chartTypes.LineChart, - isDemoExample: true, }, { options: lineDemos.lineTimeSeriesDenseOptions, @@ -324,22 +313,24 @@ let allDemoGroups = [ options: lineDemos.lineOptions, data: lineDemos.lineData, chartType: chartTypes.LineChart, - isDemoExample: true, }, { options: lineDemos.lineTimeSeriesRotatedTicksOptions, data: lineDemos.lineTimeSeriesDataRotatedTicks, chartType: chartTypes.LineChart, + isDemoExample: false, }, { options: lineDemos.lineTimeSeriesHorizontalOptions, data: lineDemos.lineTimeSeriesData, chartType: chartTypes.LineChart, + isDemoExample: false, }, { options: lineDemos.lineHorizontalOptions, data: lineDemos.lineData, chartType: chartTypes.LineChart, + isDemoExample: false, }, { options: lineDemos.lineTimeSeriesWithThresholdsOptions, @@ -350,11 +341,13 @@ let allDemoGroups = [ options: lineDemos.lineEmptyStateOptions, data: lineDemos.lineEmptyStateData, chartType: chartTypes.LineChart, + isDemoExample: false, }, { options: lineDemos.lineSkeletonOptions, data: lineDemos.lineSkeletonData, chartType: chartTypes.LineChart, + isDemoExample: false, }, ], }, @@ -365,83 +358,79 @@ let allDemoGroups = [ options: pieDemos.pieOptions, data: pieDemos.pieData, chartType: chartTypes.PieChart, - isDemoExample: true, }, { options: pieDemos.pieEmptyStateOptions, data: pieDemos.pieEmptyStateData, chartType: chartTypes.PieChart, - isDemoExample: true, + isDemoExample: false, }, { options: pieDemos.pieSkeletonOptions, data: pieDemos.pieSkeletonData, chartType: chartTypes.PieChart, - isDemoExample: true, + isDemoExample: false, }, ], }, { title: "Scatter", + description: "Scatter plot visualizations use data points to plot two measures anywhere along a scale, not only at regular tick marks. You can use scatter plots to explore correlations between different measures.", demos: [ { options: scatterDemos.doubleLinearScatterOptions, data: scatterDemos.doubleLinearScatterData, chartType: chartTypes.ScatterChart, - isDemoExample: true, }, { options: scatterDemos.scatterTimeSeriesOptions, data: scatterDemos.scatterTimeSeriesData, chartType: chartTypes.ScatterChart, - isDemoExample: true, }, { options: scatterDemos.scatterDiscreteOptions, data: scatterDemos.scatterDiscreteData, chartType: chartTypes.ScatterChart, - isDemoExample: true, }, { options: scatterDemos.scatterEmptyStateOptions, data: scatterDemos.scatterEmptyStateData, chartType: chartTypes.ScatterChart, - isDemoExample: true, + isDemoExample: false, }, { options: scatterDemos.scatterSkeletonOptions, data: scatterDemos.scatterSkeletonData, chartType: chartTypes.ScatterChart, - isDemoExample: true, + isDemoExample: false, }, ], }, { title: "Step", + description: "Stepped line charts plot data at regular intervals, forming a series of steps between data points. You can use line visualizations to show trends over time and compare several data sets.", demos: [ { options: stepDemos.stepOptions, data: stepDemos.stepData, - chartType: chartTypes.LineChart, - isDemoExample: true, + chartType: chartTypes.LineChart }, { options: stepDemos.stepTimeSeriesOptions, data: stepDemos.stepTimeSeriesData, - chartType: chartTypes.LineChart, - isDemoExample: true, + chartType: chartTypes.LineChart }, { options: stepDemos.stepEmptyStateOptions, data: stepDemos.stepEmptyStateData, chartType: chartTypes.LineChart, - isDemoExample: true, + isDemoExample: false, }, { options: stepDemos.stepSkeletonOptions, data: stepDemos.stepSkeletonData, chartType: chartTypes.LineChart, - isDemoExample: true, + isDemoExample: false, }, ], }, @@ -452,16 +441,19 @@ let allDemoGroups = [ options: timeSeriesAxisDemos.lineTimeSeries15secondsOptions, data: timeSeriesAxisDemos.lineTimeSeriesData15seconds, chartType: chartTypes.LineChart, + isDemoExample: false, }, { options: timeSeriesAxisDemos.lineTimeSeriesMinuteOptions, data: timeSeriesAxisDemos.lineTimeSeriesDataMinute, chartType: chartTypes.LineChart, + isDemoExample: false, }, { options: timeSeriesAxisDemos.lineTimeSeries30minutesOptions, data: timeSeriesAxisDemos.lineTimeSeriesData30minutes, chartType: chartTypes.LineChart, + isDemoExample: false, }, { options: @@ -469,6 +461,7 @@ let allDemoGroups = [ data: timeSeriesAxisDemos.lineTimeSeriesDataHourlyDefaultTicksFormats, chartType: chartTypes.LineChart, + isDemoExample: false, }, { options: @@ -476,16 +469,19 @@ let allDemoGroups = [ data: timeSeriesAxisDemos.lineTimeSeriesDataHourlyCustomTicksFormats, chartType: chartTypes.LineChart, + isDemoExample: false, }, { data: timeSeriesAxisDemos.lineTimeSeriesDataDaily, options: timeSeriesAxisDemos.lineTimeSeriesDailyOptions, chartType: chartTypes.LineChart, + isDemoExample: false, }, { data: timeSeriesAxisDemos.lineTimeSeriesDataWeekly, options: timeSeriesAxisDemos.lineTimeSeriesWeeklyOptions, chartType: chartTypes.LineChart, + isDemoExample: false, }, { data: @@ -493,39 +489,46 @@ let allDemoGroups = [ options: timeSeriesAxisDemos.lineTimeSeriesMonthlyDefaultLocaleOptions, chartType: chartTypes.LineChart, + isDemoExample: false, }, { data: timeSeriesAxisDemos.lineTimeSeriesDataMonthlyCustomLocale, options: timeSeriesAxisDemos.lineTimeSeriesMonthlyCustomLocaleOptions, chartType: chartTypes.LineChart, + isDemoExample: false, }, { data: timeSeriesAxisDemos.lineTimeSeriesDataQuarterly, options: timeSeriesAxisDemos.lineTimeSeriesQuarterlyOptions, chartType: chartTypes.LineChart, + isDemoExample: false, }, { data: timeSeriesAxisDemos.lineTimeSeriesDataYearly, options: timeSeriesAxisDemos.lineTimeSeriesYearlyOptions, chartType: chartTypes.LineChart, + isDemoExample: false, }, { data: timeSeriesAxisDemos.lineTimeSeriesDataSingleDatum, options: timeSeriesAxisDemos.lineTimeSeriesSingleDatumOptions, chartType: chartTypes.LineChart, + isDemoExample: false, }, { data: timeSeriesAxisDemos.lineTimeSeriesNoExtendedDomainData, options: timeSeriesAxisDemos.lineTimeSeriesNoExtendedDomainOptions, chartType: chartTypes.LineChart, + isDemoExample: false, }, { data: timeSeriesAxisDemos.lineTimeSeriesDataTwoIdenticalLabels, options: timeSeriesAxisDemos.lineTimeSeriesTwoIdenticalLabelsOptions, chartType: chartTypes.LineChart, + isDemoExample: false, }, { data: @@ -533,6 +536,7 @@ let allDemoGroups = [ options: timeSeriesAxisDemos.lineTimeSeriesAllLabelsInPrimaryFormatOptions, chartType: chartTypes.LineChart, + isDemoExample: false, }, ], }, @@ -542,20 +546,17 @@ let allDemoGroups = [ { data: radarDemos.radarData, options: radarDemos.radarOptions, - chartType: chartTypes.RadarChart, - isDemoExample: true, + chartType: chartTypes.RadarChart }, { data: radarDemos.radarWithMissingDataData, options: radarDemos.radarWithMissingDataOptions, chartType: chartTypes.RadarChart, - isDemoExample: true, }, { data: radarDemos.radarDenseData, options: radarDemos.radarDenseOptions, chartType: chartTypes.RadarChart, - isDemoExample: true, }, ], }, @@ -605,8 +606,9 @@ export const storybookDemoGroups = Tools.clone(allDemoGroups); // in the demo page we want to show only demos with isDemoExample = true export const demoGroups = Tools.clone(allDemoGroups) + // remove demoGroup if its children don't have any demo examples + .filter((demoGroup) => demoGroup.demos.filter(demo => demo.isDemoExample !== false).length > 0) .map((demoGroup) => { - demoGroup.demos = demoGroup.demos.filter(demo => demo.isDemoExample); + demoGroup.demos = demoGroup.demos.filter(demo => demo.isDemoExample !== false); return demoGroup; - }) - .filter((demoGroup) => demoGroup.demos.length); // remove demoGroup if it's children are all with isDemoExample = false + }); diff --git a/packages/core/demo/data/radar.ts b/packages/core/demo/data/radar.ts index 1a438d922c..0f2b3eac10 100644 --- a/packages/core/demo/data/radar.ts +++ b/packages/core/demo/data/radar.ts @@ -42,7 +42,7 @@ export const radarWithMissingDataData = [ { group: "Oil", key: "Sydney", value: 16 }, ]; export const radarWithMissingDataOptions = { - title: "Radar - Missing data", + title: "Radar - Missing datapoints", }; // radar dense diff --git a/packages/react/stories/all.stories.js b/packages/react/stories/all.stories.js index 6ac3cd5426..c905d3bfe1 100644 --- a/packages/react/stories/all.stories.js +++ b/packages/react/stories/all.stories.js @@ -4,10 +4,10 @@ import { withKnobs, object } from "@storybook/addon-knobs"; import * as ChartComponents from "../src/index"; -import { demoGroups } from "@carbon/charts/demo/data"; +import { storybookDemoGroups } from "@carbon/charts/demo/data"; // Loop through all demo groups -demoGroups.forEach(demoGroup => { +storybookDemoGroups.forEach(demoGroup => { // Create story group for each demo group const groupStories = storiesOf(demoGroup.title, module).addDecorator( withKnobs({ escapeHTML: false }) diff --git a/packages/svelte/stories/all.stories.js b/packages/svelte/stories/all.stories.js index 0eb124fb1e..4b73f2552b 100644 --- a/packages/svelte/stories/all.stories.js +++ b/packages/svelte/stories/all.stories.js @@ -1,10 +1,10 @@ import { storiesOf } from "@storybook/svelte"; import { withKnobs, object } from "@storybook/addon-knobs"; -import { demoGroups } from "@carbon/charts/demo/data"; +import { storybookDemoGroups } from "@carbon/charts/demo/data"; import * as ChartComponents from "../src"; import ChartWrapper from "./ChartWrapper.svelte"; -demoGroups.forEach(demoGroup => { +storybookDemoGroups.forEach(demoGroup => { const groupStories = storiesOf(demoGroup.title, module).addDecorator( withKnobs({ escapeHTML: false }) ); diff --git a/packages/vue/stories/all.stories.js b/packages/vue/stories/all.stories.js index bd06a0a4a2..926bbe8567 100644 --- a/packages/vue/stories/all.stories.js +++ b/packages/vue/stories/all.stories.js @@ -3,10 +3,10 @@ import { withKnobs, object } from '@storybook/addon-knobs'; import * as ChartComponents from '../src/index'; -import { demoGroups } from '@carbon/charts/demo/data'; +import { storybookDemoGroups } from '@carbon/charts/demo/data'; // Loop through all demo groups -demoGroups.forEach(demoGroup => { +storybookDemoGroups.forEach(demoGroup => { // Create story group for each demo group const groupStories = storiesOf(demoGroup.title, module).addDecorator( withKnobs({ escapeHTML: false })