@carbon/charts 0.41.51 → 0.41.52

package/demo/data/index.js

@@ -26,108 +26,303 @@ export * from './combo';
 export * from './donut';
 export * from './gauge';
 export * from './line';
+export * from './lollipop';
 export * from './meter';
 export * from './pie';
 export * from './radar';
 export * from './scatter';
 export * from './step';
+export * from './time-series-axis';
 export * from './treemap';
+export * from './toolbar';
 export * from './wordcloud';
+export * from './zoom-bar';
+export * from './high-scale';
 import { createChartSandbox, createReactChartApp, createAngularChartApp, createVueChartApp, createVanillaChartApp, createSvelteChartApp, } from '../create-codesandbox';
-import { Tools } from '@carbon/charts/tools';
-export var chartTypes = {
-    AreaChart: {
-        vanilla: 'AreaChart',
-        angular: 'ibm-area-chart',
-        vue: 'ccv-area-chart',
-    },
-    BoxplotChart: {
-        vanilla: 'BoxplotChart',
-        angular: 'ibm-boxplot-chart',
-        vue: 'ccv-boxplot-chart',
-    },
-    BubbleChart: {
-        vanilla: 'BubbleChart',
-        angular: 'ibm-bubble-chart',
-        vue: 'ccv-bubble-chart',
-    },
-    ComboChart: {
-        vanilla: 'ComboChart',
-        angular: 'ibm-combo-chart',
-        vue: 'ccv-combo-chart',
-    },
-    DonutChart: {
-        vanilla: 'DonutChart',
-        angular: 'ibm-donut-chart',
-        vue: 'ccv-donut-chart',
-    },
-    GaugeChart: {
-        vanilla: 'GaugeChart',
-        angular: 'ibm-gauge-chart',
-        vue: 'ccv-gauge-chart',
-    },
-    GroupedBarChart: {
-        vanilla: 'GroupedBarChart',
-        angular: 'ibm-grouped-bar-chart',
-        vue: 'ccv-grouped-bar-chart',
-    },
-    LineChart: {
-        vanilla: 'LineChart',
-        angular: 'ibm-line-chart',
-        vue: 'ccv-line-chart',
-    },
-    LollipopChart: {
-        vanilla: 'LollipopChart',
-        angular: 'ibm-lollipop-chart',
-        vue: 'ccv-lollipop-chart',
-    },
-    MeterChart: {
-        vanilla: 'MeterChart',
-        angular: 'ibm-meter-chart',
-        vue: 'ccv-meter-chart',
+import chartTypes from './CHART_TYPES';
+export * from './CHART_TYPES';
+export var DemoGroupTypes;
+(function (DemoGroupTypes) {
+    DemoGroupTypes["UTILITY"] = "utility";
+    DemoGroupTypes["SIMPLE_CHART"] = "simple-chart";
+    DemoGroupTypes["COMPLEX_CHART"] = "complex-chart";
+})(DemoGroupTypes || (DemoGroupTypes = {}));
+var utilityDemoGroups = [
+    {
+        title: 'Axes',
+        demos: [
+            {
+                options: barDemos.simpleBarOptionsCustomTicks,
+                data: barDemos.simpleBarDataCustomTicks,
+                chartType: chartTypes.SimpleBarChart,
+            },
+            {
+                options: barDemos.stackedBarTimeSeriesOptionsCustomTicks,
+                data: barDemos.stackedBarTimeSeriesDataCustomTicks,
+                chartType: chartTypes.StackedBarChart,
+            },
+            {
+                options: barDemos.simpleBarFixedDomainOptions,
+                data: barDemos.simpleBarData,
+                chartType: chartTypes.SimpleBarChart,
+            },
+            {
+                options: lineDemos.lineCustomDomainOptions,
+                data: lineDemos.lineData,
+                chartType: chartTypes.LineChart,
+            },
+            {
+                options: lineDemos.lineTimeSeriesRotatedTicksOptions,
+                data: lineDemos.lineTimeSeriesDataRotatedTicks,
+                chartType: chartTypes.LineChart,
+            },
+        ],
     },
-    PieChart: {
-        vanilla: 'PieChart',
-        angular: 'ibm-pie-chart',
-        vue: 'ccv-pie-chart',
+    {
+        title: 'Axes/Time series',
+        demos: [
+            {
+                options: timeSeriesAxisDemos.lineTimeSeries15secondsOptions,
+                data: timeSeriesAxisDemos.lineTimeSeriesData15seconds,
+                chartType: chartTypes.LineChart,
+            },
+            {
+                options: timeSeriesAxisDemos.lineTimeSeriesMinuteOptions,
+                data: timeSeriesAxisDemos.lineTimeSeriesDataMinute,
+                chartType: chartTypes.LineChart,
+            },
+            {
+                options: timeSeriesAxisDemos.lineTimeSeries30minutesOptions,
+                data: timeSeriesAxisDemos.lineTimeSeriesData30minutes,
+                chartType: chartTypes.LineChart,
+            },
+            {
+                options: timeSeriesAxisDemos.lineTimeSeriesHourlyDefaultLocaleOptions,
+                data: timeSeriesAxisDemos.lineTimeSeriesDataHourlyDefaultTicksFormats,
+                chartType: chartTypes.LineChart,
+            },
+            {
+                options: timeSeriesAxisDemos.lineTimeSeriesHourlyCustomTicksFormatsOptions,
+                data: timeSeriesAxisDemos.lineTimeSeriesDataHourlyCustomTicksFormats,
+                chartType: chartTypes.LineChart,
+            },
+            {
+                data: timeSeriesAxisDemos.lineTimeSeriesDataDaily,
+                options: timeSeriesAxisDemos.lineTimeSeriesDailyOptions,
+                chartType: chartTypes.LineChart,
+            },
+            {
+                data: timeSeriesAxisDemos.lineTimeSeriesDataWeekly,
+                options: timeSeriesAxisDemos.lineTimeSeriesWeeklyOptions,
+                chartType: chartTypes.LineChart,
+            },
+            {
+                data: timeSeriesAxisDemos.lineTimeSeriesDataMonthlyDefaultLocale,
+                options: timeSeriesAxisDemos.lineTimeSeriesMonthlyDefaultLocaleOptions,
+                chartType: chartTypes.LineChart,
+            },
+            {
+                data: timeSeriesAxisDemos.lineTimeSeriesDataMonthlyCustomLocale,
+                options: timeSeriesAxisDemos.lineTimeSeriesMonthlyCustomLocaleOptions,
+                chartType: chartTypes.LineChart,
+            },
+            {
+                data: timeSeriesAxisDemos.lineTimeSeriesDataQuarterly,
+                options: timeSeriesAxisDemos.lineTimeSeriesQuarterlyOptions,
+                chartType: chartTypes.LineChart,
+            },
+            {
+                data: timeSeriesAxisDemos.lineTimeSeriesDataYearly,
+                options: timeSeriesAxisDemos.lineTimeSeriesYearlyOptions,
+                chartType: chartTypes.LineChart,
+            },
+            {
+                data: timeSeriesAxisDemos.lineTimeSeriesDataSingleDatum,
+                options: timeSeriesAxisDemos.lineTimeSeriesSingleDatumOptions,
+                chartType: chartTypes.LineChart,
+            },
+            {
+                data: timeSeriesAxisDemos.lineTimeSeriesNoExtendedDomainData,
+                options: timeSeriesAxisDemos.lineTimeSeriesNoExtendedDomainOptions,
+                chartType: chartTypes.LineChart,
+            },
+            {
+                data: timeSeriesAxisDemos.lineTimeSeriesDataTwoIdenticalLabels,
+                options: timeSeriesAxisDemos.lineTimeSeriesTwoIdenticalLabelsOptions,
+                chartType: chartTypes.LineChart,
+            },
+            {
+                data: timeSeriesAxisDemos.lineTimeSeriesDataAllLabelsInPrimaryFormat,
+                options: timeSeriesAxisDemos.lineTimeSeriesAllLabelsInPrimaryFormatOptions,
+                chartType: chartTypes.LineChart,
+            },
+        ],
     },
-    RadarChart: {
-        vanilla: 'RadarChart',
-        angular: 'ibm-radar-chart',
-        vue: 'ccv-radar-chart',
+    {
+        title: 'Colors',
+        demos: [
+            {
+                options: barDemos.simpleBarColorOverrideOptions,
+                data: barDemos.simpleBarData,
+                chartType: chartTypes.SimpleBarChart,
+            },
+            {
+                options: lineDemos.lineCustomColorOptions,
+                data: lineDemos.lineData,
+                chartType: chartTypes.LineChart,
+            },
+        ],
     },
-    ScatterChart: {
-        vanilla: 'ScatterChart',
-        angular: 'ibm-scatter-chart',
-        vue: 'ccv-scatter-chart',
+    {
+        title: 'Legend',
+        demos: [
+            {
+                options: barDemos.simpleBarCenteredLegendOptions,
+                data: barDemos.simpleBarCenteredLegendData,
+                chartType: chartTypes.SimpleBarChart,
+            },
+            {
+                options: barDemos.simpleBarCustomLegendOrderOptions,
+                data: barDemos.simpleBarData,
+                chartType: chartTypes.SimpleBarChart,
+            },
+            {
+                options: barDemos.groupedBarSelectedGroupsOptions,
+                data: barDemos.groupedBarSelectedGroupsData,
+                chartType: chartTypes.GroupedBarChart,
+            },
+            {
+                options: lineDemos.lineSelectedGroupsOptions,
+                data: lineDemos.lineSelectedGroupsData,
+                chartType: chartTypes.LineChart,
+            },
+        ],
     },
-    SimpleBarChart: {
-        vanilla: 'SimpleBarChart',
-        angular: 'ibm-simple-bar-chart',
-        vue: 'ccv-simple-bar-chart',
+    {
+        title: 'Locale',
+        demos: [
+            {
+                options: barDemos.simpleBarTurkishLocaleOptions,
+                data: barDemos.simpleBarTurkishLocaleData,
+                chartType: chartTypes.SimpleBarChart,
+            },
+        ],
     },
-    StackedAreaChart: {
-        vanilla: 'StackedAreaChart',
-        angular: 'ibm-stacked-area-chart',
-        vue: 'ccv-stacked-area-chart',
+    {
+        title: 'Thresholds',
+        demos: [
+            {
+                options: lineDemos.lineTimeSeriesWithThresholdsOptions,
+                data: lineDemos.lineTimeSeriesData,
+                chartType: chartTypes.LineChart,
+            },
+        ],
     },
-    StackedBarChart: {
-        vanilla: 'StackedBarChart',
-        angular: 'ibm-stacked-bar-chart',
-        vue: 'ccv-stacked-bar-chart',
+    {
+        title: 'Toolbar',
+        demos: [
+            {
+                options: toolbarDemos.toolbarStackedBarTimeSeriesOptions,
+                data: toolbarDemos.toolbarStackedBarTimeSeriesData,
+                chartType: chartTypes.StackedBarChart,
+            },
+            {
+                options: toolbarDemos.toolbarLineTimeSeriesOptions,
+                data: toolbarDemos.toolbarLineTimeSeriesData,
+                chartType: chartTypes.LineChart,
+            },
+        ],
     },
-    TreemapChart: {
-        vanilla: 'TreemapChart',
-        angular: 'ibm-treemap-chart',
-        vue: 'ccv-treemap-chart',
+    {
+        title: 'Truncations',
+        demos: [
+            {
+                options: barDemos.simpleHorizontalBarLongLabelOptions,
+                data: barDemos.simpleHorizontalBarLongLabelData,
+                chartType: chartTypes.SimpleBarChart,
+            },
+            {
+                options: lineDemos.lineLongLabelOptions,
+                data: lineDemos.lineLongLabelData,
+                chartType: chartTypes.LineChart,
+            },
+        ],
     },
-    WordCloudChart: {
-        vanilla: 'WordCloudChart',
-        angular: 'ibm-wordcloud-chart',
-        vue: 'ccv-wordcloud-chart',
+    {
+        title: 'Zoom bar',
+        demos: [
+            {
+                options: zoomBarDemos.zoomBarStackedAreaTimeSeriesOptions,
+                data: zoomBarDemos.zoomBarStackedAreaTimeSeriesData,
+                chartType: chartTypes.StackedAreaChart,
+            },
+            {
+                options: zoomBarDemos.zoomBarSimpleBarTimeSeriesOptions,
+                data: zoomBarDemos.zoomBarSimpleBarTimeSeriesData,
+                chartType: chartTypes.SimpleBarChart,
+            },
+            {
+                options: zoomBarDemos.zoomBarStackedBarTimeSeriesOptions,
+                data: zoomBarDemos.zoomBarStackedBarTimeSeriesData,
+                chartType: chartTypes.StackedBarChart,
+            },
+            {
+                options: zoomBarDemos.definedZoomBarStackedBarTimeSeriesOptions,
+                data: zoomBarDemos.definedZoomBarStackedBarTimeSeriesData,
+                chartType: chartTypes.StackedBarChart,
+            },
+            {
+                options: zoomBarDemos.zoomBarBubbleTimeSeriesOptions,
+                data: zoomBarDemos.zoomBarBubbleTimeSeriesData,
+                chartType: chartTypes.BubbleChart,
+            },
+            {
+                options: zoomBarDemos.zoomBarLineTimeSeriesOptions,
+                data: zoomBarDemos.zoomBarLineTimeSeriesData,
+                chartType: chartTypes.LineChart,
+            },
+            {
+                options: zoomBarDemos.zoomBarScatterTimeSeriesOptions,
+                data: zoomBarDemos.zoomBarScatterTimeSeriesData,
+                chartType: chartTypes.ScatterChart,
+            },
+            {
+                options: zoomBarDemos.zoomBarStepTimeSeriesOptions,
+                data: zoomBarDemos.zoomBarStepTimeSeriesData,
+                chartType: chartTypes.LineChart,
+            },
+            {
+                options: zoomBarDemos.zoomBarLineTimeSeries15secondsOptions,
+                data: zoomBarDemos.zoomBarLineTimeSeries15secondsData,
+                chartType: chartTypes.LineChart,
+            },
+            {
+                options: zoomBarDemos.zoomBarLineTimeSeriesInitDomainOptions,
+                data: zoomBarDemos.zoomBarLineTimeSeriesInitDomainData,
+                chartType: chartTypes.LineChart,
+            },
+            {
+                options: zoomBarDemos.zoomBarStringDateOptions,
+                data: zoomBarDemos.zoomBarStringDateData,
+                chartType: chartTypes.LineChart,
+            },
+            {
+                options: zoomBarDemos.zoomBarLockedOptions,
+                data: zoomBarDemos.zoomBarLockedData,
+                chartType: chartTypes.StackedBarChart,
+            },
+            {
+                options: zoomBarDemos.zoomBarSkeletonOptions,
+                data: zoomBarDemos.zoomBarSkeletonData,
+                chartType: chartTypes.StackedBarChart,
+            },
+        ],
     },
-};
-var allDemoGroups = [
+].map(function (demoGroup) {
+    demoGroup.type = DemoGroupTypes.UTILITY;
+    return demoGroup;
+});
+var simpleChartDemos = [
     {
         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.',
@@ -136,12 +331,12 @@ var allDemoGroups = [
                 options: areaDemos.areaTimeSeriesCurvedOptions,
                 data: areaDemos.areaTimeSeriesCurvedData,
                 chartType: chartTypes.AreaChart,
+                mainDemo: true,
             },
             {
                 options: areaDemos.areaTimeSeriesOptions,
                 data: areaDemos.areaTimeSeriesData,
                 chartType: chartTypes.AreaChart,
-                isDemoExample: false,
             },
             {
                 options: areaDemos.areaDiscreteDomainOptions,
@@ -152,31 +347,21 @@ var allDemoGroups = [
                 options: areaDemos.stackedAreaTimeSeriesOptions,
                 data: areaDemos.stackedAreaTimeSeriesData,
                 chartType: chartTypes.StackedAreaChart,
-                isDemoExample: true,
             },
             {
                 options: areaDemos.stackedAreaTimeSeriesUnevenDataOptions,
                 data: areaDemos.stackedAreaTimeSeriesUnevenData,
                 chartType: chartTypes.StackedAreaChart,
-                isDemoExample: true,
             },
             {
                 options: areaDemos.stackedAreaPercentageTimeSeriesOptions,
                 data: areaDemos.stackedAreaTimeSeriesData,
                 chartType: chartTypes.StackedAreaChart,
-                isDemoExample: true,
-            },
-            {
-                options: areaDemos.sparklineOptions,
-                data: areaDemos.sparklineTimeSeriesData,
-                chartType: chartTypes.AreaChart,
-                isDemoExample: true,
             },
             {
                 options: areaDemos.boundedAreaTimeSeriesOptions,
                 data: areaDemos.boundedAreaTimeSeriesData,
                 chartType: chartTypes.AreaChart,
-                isDemoExample: true,
             },
             {
                 options: areaDemos.areaSkeletonOptions,
@@ -201,7 +386,7 @@ var allDemoGroups = [
         ],
     },
     {
-        title: 'Bar (vertical)',
+        title: 'Bar (simple)',
         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: [
             {
@@ -210,85 +395,90 @@ var allDemoGroups = [
                 chartType: chartTypes.SimpleBarChart,
             },
             {
-                options: barDemos.simpleBarColorOverrideOptions,
-                data: barDemos.simpleBarData,
+                options: barDemos.simpleBarTimeSeriesOptions,
+                data: barDemos.simpleBarTimeSeriesData,
                 chartType: chartTypes.SimpleBarChart,
             },
             {
-                options: barDemos.simpleBarOptionsCustomTicks,
-                data: barDemos.simpleBarDataCustomTicks,
+                options: barDemos.simpleBarTimeSeriesDenseOptions,
+                data: barDemos.simpleBarTimeSeriesDenseData,
                 chartType: chartTypes.SimpleBarChart,
-                isDemoExample: false,
             },
             {
-                options: barDemos.simpleBarCustomLegendOrderOptions,
-                data: barDemos.simpleBarData,
+                options: barDemos.simpleBarEmptyStateOptions,
+                data: barDemos.simpleBarEmptyStateData,
                 chartType: chartTypes.SimpleBarChart,
             },
             {
-                options: barDemos.simpleBarCenteredLegendOptions,
-                data: barDemos.simpleBarCenteredLegendData,
+                options: barDemos.simpleBarSkeletonOptions,
+                data: barDemos.simpleBarSkeletonData,
                 chartType: chartTypes.SimpleBarChart,
             },
             {
-                options: barDemos.simpleBarLongLabelOptions,
-                data: barDemos.simpleBarLongLabelData,
+                options: barDemos.simpleHorizontalBarOptions,
+                data: barDemos.simpleHorizontalBarData,
                 chartType: chartTypes.SimpleBarChart,
-                isDemoExample: true,
+                mainDemo: true,
             },
             {
-                options: barDemos.simpleBarFixedDomainOptions,
-                data: barDemos.simpleBarData,
+                options: barDemos.simpleHorizontalBarTimeSeriesOptions,
+                data: barDemos.simpleHorizontalBarTimeSeriesData,
                 chartType: chartTypes.SimpleBarChart,
             },
             {
-                options: barDemos.simpleBarTimeSeriesDenseOptions,
-                data: barDemos.simpleBarTimeSeriesDenseData,
+                options: barDemos.simpleHorizontalBarEmptyStateOptions,
+                data: barDemos.simpleHorizontalBarEmptyStateData,
                 chartType: chartTypes.SimpleBarChart,
-                isDemoExample: true,
             },
             {
-                options: barDemos.simpleBarTimeSeriesOptions,
-                data: barDemos.simpleBarTimeSeriesData,
+                options: barDemos.simpleHorizontalBarSkeletonOptions,
+                data: barDemos.simpleHorizontalBarSkeletonData,
                 chartType: chartTypes.SimpleBarChart,
             },
+        ],
+    },
+    {
+        title: 'Bar (grouped)',
+        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.',
+        demos: [
             {
-                options: barDemos.simpleBarEmptyStateOptions,
-                data: barDemos.simpleBarEmptyStateData,
-                chartType: chartTypes.SimpleBarChart,
-                isDemoExample: false,
+                options: barDemos.groupedBarOptions,
+                data: barDemos.groupedBarData,
+                chartType: chartTypes.GroupedBarChart,
+                mainDemo: true,
             },
             {
-                options: barDemos.simpleBarSkeletonOptions,
-                data: barDemos.simpleBarSkeletonData,
-                chartType: chartTypes.SimpleBarChart,
-                isDemoExample: false,
+                options: barDemos.groupedBarEmptyStateOptions,
+                data: barDemos.groupedBarEmptyStateData,
+                chartType: chartTypes.GroupedBarChart,
             },
             {
-                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,
+                options: barDemos.groupedBarSkeletonOptions,
+                data: barDemos.groupedBarSkeletonData,
                 chartType: chartTypes.GroupedBarChart,
             },
             {
-                options: barDemos.groupedBarSelectedGroupsOptions,
-                data: barDemos.groupedBarSelectedGroupsData,
+                options: barDemos.groupedHorizontalBarOptions,
+                data: barDemos.groupedHorizontalBarData,
                 chartType: chartTypes.GroupedBarChart,
             },
             {
-                options: barDemos.groupedBarEmptyStateOptions,
-                data: barDemos.groupedBarEmptyStateData,
+                options: barDemos.groupedHorizontalBarEmptyStateOptions,
+                data: barDemos.groupedHorizontalBarEmptyStateData,
                 chartType: chartTypes.GroupedBarChart,
-                isDemoExample: false,
             },
             {
-                options: barDemos.groupedBarSkeletonOptions,
-                data: barDemos.groupedBarSkeletonData,
+                options: barDemos.groupedHorizontalBarSkeletonOptions,
+                data: barDemos.groupedHorizontalBarSkeletonData,
                 chartType: chartTypes.GroupedBarChart,
-                isDemoExample: false,
             },
+        ],
+    },
+    {
+        title: 'Bar (stacked)',
+        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.',
+        demos: [
             {
-                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,
@@ -298,83 +488,21 @@ var allDemoGroups = [
                 data: barDemos.stackedBarTimeSeriesData,
                 chartType: chartTypes.StackedBarChart,
             },
-            {
-                options: barDemos.stackedBarTimeSeriesOptionsCustomTicks,
-                data: barDemos.stackedBarTimeSeriesDataCustomTicks,
-                chartType: chartTypes.StackedBarChart,
-                isDemoExample: false,
-            },
             {
                 options: barDemos.stackedBarEmptyStateOptions,
                 data: barDemos.stackedBarEmptyStateData,
                 chartType: chartTypes.StackedBarChart,
-                isDemoExample: false,
             },
             {
                 options: barDemos.stackedBarSkeletonOptions,
                 data: barDemos.stackedBarSkeletonData,
                 chartType: chartTypes.StackedBarChart,
-                isDemoExample: false,
-            },
-        ],
-    },
-    {
-        title: 'Bar (horizontal)',
-        demos: [
-            {
-                options: barDemos.simpleHorizontalBarOptions,
-                data: barDemos.simpleHorizontalBarData,
-                chartType: chartTypes.SimpleBarChart,
-            },
-            {
-                options: barDemos.simpleHorizontalBarCenteredLegendOptions,
-                data: barDemos.simpleHorizontalBarCenteredLegendData,
-                chartType: chartTypes.SimpleBarChart,
-            },
-            {
-                options: barDemos.simpleHorizontalBarLongLabelOptions,
-                data: barDemos.simpleHorizontalBarLongLabelData,
-                chartType: chartTypes.SimpleBarChart,
-                isDemoExample: true,
-            },
-            {
-                options: barDemos.simpleHorizontalBarTimeSeriesOptions,
-                data: barDemos.simpleHorizontalBarTimeSeriesData,
-                chartType: chartTypes.SimpleBarChart,
-            },
-            {
-                options: barDemos.simpleHorizontalBarEmptyStateOptions,
-                data: barDemos.simpleHorizontalBarEmptyStateData,
-                chartType: chartTypes.SimpleBarChart,
-                isDemoExample: false,
-            },
-            {
-                options: barDemos.simpleHorizontalBarSkeletonOptions,
-                data: barDemos.simpleHorizontalBarSkeletonData,
-                chartType: chartTypes.SimpleBarChart,
-                isDemoExample: false,
-            },
-            {
-                options: barDemos.groupedHorizontalBarOptions,
-                data: barDemos.groupedHorizontalBarData,
-                chartType: chartTypes.GroupedBarChart,
-            },
-            {
-                options: barDemos.groupedHorizontalBarEmptyStateOptions,
-                data: barDemos.groupedHorizontalBarEmptyStateData,
-                chartType: chartTypes.GroupedBarChart,
-                isDemoExample: false,
-            },
-            {
-                options: barDemos.groupedHorizontalBarSkeletonOptions,
-                data: barDemos.groupedHorizontalBarSkeletonData,
-                chartType: chartTypes.GroupedBarChart,
-                isDemoExample: false,
             },
             {
                 options: barDemos.stackedHorizontalBarOptions,
                 data: barDemos.stackedHorizontalBarData,
                 chartType: chartTypes.StackedBarChart,
+                mainDemo: true,
             },
             {
                 options: barDemos.stackedHorizontalBarTimeSeriesOptions,
@@ -385,13 +513,11 @@ var allDemoGroups = [
                 options: barDemos.stackedHorizontalBarEmptyStateOptions,
                 data: barDemos.stackedHorizontalBarEmptyStateData,
                 chartType: chartTypes.StackedBarChart,
-                isDemoExample: false,
             },
             {
                 options: barDemos.stackedHorizontalBarSkeletonOptions,
                 data: barDemos.stackedHorizontalBarSkeletonData,
                 chartType: chartTypes.StackedBarChart,
-                isDemoExample: false,
             },
         ],
     },
@@ -402,6 +528,7 @@ var allDemoGroups = [
                 options: boxplotDemos.simpleBoxplotOptions,
                 data: boxplotDemos.simpleBoxplotData,
                 chartType: chartTypes.BoxplotChart,
+                mainDemo: true,
             },
             {
                 options: boxplotDemos.simpleVerticalBoxplotOptions,
@@ -418,6 +545,7 @@ var allDemoGroups = [
                 options: bubbleDemos.bubbleDoubleLinearOptions,
                 data: bubbleDemos.bubbleDoubleLinearData,
                 chartType: chartTypes.BubbleChart,
+                mainDemo: true,
             },
             {
                 options: bubbleDemos.bubbleTimeSeriesOptions,
@@ -429,23 +557,20 @@ var allDemoGroups = [
                 data: bubbleDemos.bubbleDiscreteData,
                 chartType: chartTypes.BubbleChart,
             },
+            {
+                options: bubbleDemos.bubbleDualDiscreteOptions,
+                data: bubbleDemos.bubbleDualDiscreteData,
+                chartType: chartTypes.BubbleChart,
+            },
             {
                 options: bubbleDemos.bubbleEmptyStateOptions,
                 data: bubbleDemos.bubbleEmptyStateData,
                 chartType: chartTypes.BubbleChart,
-                isDemoExample: false,
             },
             {
                 options: bubbleDemos.bubbleSkeletonOptions,
                 data: bubbleDemos.bubbleSkeletonData,
                 chartType: chartTypes.BubbleChart,
-                isDemoExample: false,
-            },
-            {
-                options: bubbleDemos.bubbleDualDiscreteOptions,
-                data: bubbleDemos.bubbleDualDiscreteData,
-                chartType: chartTypes.BubbleChart,
-                isDemoExample: false,
             },
         ],
     },
@@ -456,67 +581,57 @@ var allDemoGroups = [
                 options: comboDemos.comboSimpleOptions,
                 data: comboDemos.comboSimpleData,
                 chartType: chartTypes.ComboChart,
-                isDemoExample: true,
             },
             {
                 options: comboDemos.comboStackedOptions,
                 data: comboDemos.comboStackedData,
                 chartType: chartTypes.ComboChart,
-                isDemoExample: true,
             },
             {
                 options: comboDemos.comboGroupedOptions,
                 data: comboDemos.comboGroupedData,
                 chartType: chartTypes.ComboChart,
-                isDemoExample: true,
             },
             {
                 options: comboDemos.comboGroupedHorizontalOptions,
                 data: comboDemos.comboGroupedHorizontalData,
                 chartType: chartTypes.ComboChart,
-                isDemoExample: true,
             },
             {
                 options: comboDemos.comboHorizontalOptions,
                 data: comboDemos.comboHorizontalData,
                 chartType: chartTypes.ComboChart,
-                isDemoExample: true,
             },
             {
                 options: comboDemos.comboAreaLineOptions,
                 data: comboDemos.comboAreaLineData,
                 chartType: chartTypes.ComboChart,
-                isDemoExample: true,
             },
             {
                 options: comboDemos.comboStackedAreaLineOptions,
                 data: comboDemos.comboStackedAreaLine,
                 chartType: chartTypes.ComboChart,
-                isDemoExample: true,
             },
             {
                 options: comboDemos.comboLineScatterOptions,
                 data: comboDemos.comboLineScatterData,
                 chartType: chartTypes.ComboChart,
-                isDemoExample: true,
             },
             {
                 options: comboDemos.comboAreaLineTimeSeriesOptions,
                 data: comboDemos.comboAreaLineTimeSeriesData,
                 chartType: chartTypes.ComboChart,
-                isDemoExample: true,
+                mainDemo: true,
             },
             {
                 options: comboDemos.comboEmptyOptions,
                 data: comboDemos.comboEmptyData,
                 chartType: chartTypes.ComboChart,
-                isDemoExample: true,
             },
             {
                 options: comboDemos.comboLoadingOptions,
                 data: comboDemos.comboLoadingData,
                 chartType: chartTypes.ComboChart,
-                isDemoExample: true,
             },
         ],
     },
@@ -527,6 +642,7 @@ var allDemoGroups = [
                 options: donutDemos.donutOptions,
                 data: donutDemos.donutData,
                 chartType: chartTypes.DonutChart,
+                mainDemo: true,
             },
             {
                 options: donutDemos.donutCenteredOptions,
@@ -537,13 +653,11 @@ var allDemoGroups = [
                 options: donutDemos.donutEmptyStateOptions,
                 data: donutDemos.donutEmptyStateData,
                 chartType: chartTypes.DonutChart,
-                isDemoExample: false,
             },
             {
                 options: donutDemos.donutSkeletonOptions,
                 data: donutDemos.donutSkeletonData,
                 chartType: chartTypes.DonutChart,
-                isDemoExample: false,
             },
         ],
     },
@@ -554,19 +668,17 @@ var allDemoGroups = [
                 options: gaugeDemos.gaugeOptionsSemi,
                 data: gaugeDemos.gaugeData,
                 chartType: chartTypes.GaugeChart,
-                isDemoExample: true,
+                mainDemo: true,
             },
             {
                 options: gaugeDemos.gaugeOptionsCircular,
                 data: gaugeDemos.gaugeData,
                 chartType: chartTypes.GaugeChart,
-                isDemoExample: true,
             },
             {
                 options: gaugeDemos.gaugeOptionsCircularNoDelta,
                 data: gaugeDemos.gaugeDataNoDelta,
                 chartType: chartTypes.GaugeChart,
-                isDemoExample: true,
             },
         ],
     },
@@ -579,40 +691,11 @@ var allDemoGroups = [
                 data: lineDemos.lineData,
                 chartType: chartTypes.LineChart,
             },
-            {
-                options: lineDemos.lineCustomColorOptions,
-                data: lineDemos.lineData,
-                chartType: chartTypes.LineChart,
-            },
-            {
-                options: lineDemos.lineCenteredLegendOptions,
-                data: lineDemos.lineCenteredLegendData,
-                chartType: chartTypes.LineChart,
-            },
-            {
-                options: lineDemos.lineLongLabelOptions,
-                data: lineDemos.lineLongLabelData,
-                chartType: chartTypes.LineChart,
-            },
-            {
-                options: lineDemos.lineCustomDomainOptions,
-                data: lineDemos.lineData,
-                chartType: chartTypes.LineChart,
-            },
-            {
-                options: lineDemos.lineSelectedGroupsOptions,
-                data: lineDemos.lineSelectedGroupsData,
-                chartType: chartTypes.LineChart,
-            },
             {
                 options: lineDemos.lineTimeSeriesOptions,
                 data: lineDemos.lineTimeSeriesData,
                 chartType: chartTypes.LineChart,
-            },
-            {
-                options: lineDemos.lineTimeSeriesCustomDomainOptions,
-                data: lineDemos.lineTimeSeriesData,
-                chartType: chartTypes.LineChart,
+                mainDemo: true,
             },
             {
                 options: lineDemos.lineTimeSeriesDenseOptions,
@@ -620,50 +703,19 @@ var allDemoGroups = [
                 chartType: chartTypes.LineChart,
             },
             {
-                options: lineDemos.lineTimeSeriesRotatedTicksOptions,
-                data: lineDemos.lineTimeSeriesDataRotatedTicks,
-                chartType: chartTypes.LineChart,
-                isDemoExample: false,
-            },
-            {
-                options: lineDemos.lineHorizontalOptions,
-                data: lineDemos.lineData,
-                chartType: chartTypes.LineChart,
-                isDemoExample: false,
-            },
-            {
-                options: lineDemos.lineTimeSeriesHorizontalOptions,
-                data: lineDemos.lineTimeSeriesData,
-                chartType: chartTypes.LineChart,
-                isDemoExample: false,
-            },
-            {
-                options: lineDemos.lineTimeSeriesWithThresholdsOptions,
-                data: lineDemos.lineTimeSeriesData,
+                options: lineDemos.dualLine,
+                data: lineDemos.lineTimeSeriesDualAxesData,
                 chartType: chartTypes.LineChart,
             },
             {
                 options: lineDemos.lineEmptyStateOptions,
                 data: lineDemos.lineEmptyStateData,
                 chartType: chartTypes.LineChart,
-                isDemoExample: false,
             },
             {
                 options: lineDemos.lineSkeletonOptions,
                 data: lineDemos.lineSkeletonData,
                 chartType: chartTypes.LineChart,
-                isDemoExample: false,
-            },
-            {
-                options: lineDemos.dualLine,
-                data: lineDemos.lineTimeSeriesDualAxesData,
-                chartType: chartTypes.LineChart,
-                isDemoExample: true,
-            },
-            {
-                options: lineDemos.sparklineLoadingOptions,
-                data: lineDemos.lineSkeletonData,
-                chartType: chartTypes.LineChart,
             },
         ],
     },
@@ -679,6 +731,7 @@ var allDemoGroups = [
                 options: lollipopDemos.lollipopDiscretePresentationOptions,
                 data: lollipopDemos.lollipopDiscretePresentationData,
                 chartType: chartTypes.LollipopChart,
+                mainDemo: true,
             },
         ],
     },
@@ -689,6 +742,7 @@ var allDemoGroups = [
                 options: pieDemos.pieOptions,
                 data: pieDemos.pieData,
                 chartType: chartTypes.PieChart,
+                mainDemo: true
             },
             {
                 options: pieDemos.pieCenteredOptions,
@@ -699,13 +753,11 @@ var allDemoGroups = [
                 options: pieDemos.pieEmptyStateOptions,
                 data: pieDemos.pieEmptyStateData,
                 chartType: chartTypes.PieChart,
-                isDemoExample: false,
             },
             {
                 options: pieDemos.pieSkeletonOptions,
                 data: pieDemos.pieSkeletonData,
                 chartType: chartTypes.PieChart,
-                isDemoExample: false,
             },
         ],
     },
@@ -716,19 +768,17 @@ var allDemoGroups = [
                 options: meterDemos.meterOptionsWithStatus,
                 data: meterDemos.meterData,
                 chartType: chartTypes.MeterChart,
-                isDemoExample: true,
+                mainDemo: true
             },
             {
                 options: meterDemos.meterOptionsCustomColor,
                 data: meterDemos.meterData,
                 chartType: chartTypes.MeterChart,
-                isDemoExample: true,
             },
             {
                 options: meterDemos.meterOptionsNoStatus,
                 data: meterDemos.meterData,
                 chartType: chartTypes.MeterChart,
-                isDemoExample: true,
             },
         ],
     },
@@ -754,6 +804,7 @@ var allDemoGroups = [
                 data: radarDemos.radarDenseData,
                 options: radarDemos.radarDenseOptions,
                 chartType: chartTypes.RadarChart,
+                mainDemo: true
             },
         ],
     },
@@ -770,6 +821,7 @@ var allDemoGroups = [
                 options: scatterDemos.scatterTimeSeriesOptions,
                 data: scatterDemos.scatterTimeSeriesData,
                 chartType: chartTypes.ScatterChart,
+                mainDemo: true
             },
             {
                 options: scatterDemos.scatterDiscreteOptions,
@@ -777,27 +829,35 @@ var allDemoGroups = [
                 chartType: chartTypes.ScatterChart,
             },
             {
-                options: scatterDemos.scatterLongLabelDiscreteOptions,
-                data: scatterDemos.scatterLongLabelDiscreteData,
+                options: scatterDemos.scatterDualAxesOptions,
+                data: scatterDemos.scatterDualAxesData,
                 chartType: chartTypes.ScatterChart,
             },
             {
                 options: scatterDemos.scatterEmptyStateOptions,
                 data: scatterDemos.scatterEmptyStateData,
                 chartType: chartTypes.ScatterChart,
-                isDemoExample: false,
             },
             {
                 options: scatterDemos.scatterSkeletonOptions,
                 data: scatterDemos.scatterSkeletonData,
                 chartType: chartTypes.ScatterChart,
-                isDemoExample: false,
             },
+        ],
+    },
+    {
+        title: 'Sparkline',
+        demos: [
             {
-                options: scatterDemos.scatterDualAxesOptions,
-                data: scatterDemos.scatterDualAxesData,
-                chartType: chartTypes.ScatterChart,
-                isDemoExample: false,
+                options: areaDemos.sparklineOptions,
+                data: areaDemos.sparklineTimeSeriesData,
+                chartType: chartTypes.AreaChart,
+                mainDemo: true
+            },
+            {
+                options: lineDemos.sparklineLoadingOptions,
+                data: lineDemos.lineSkeletonData,
+                chartType: chartTypes.LineChart,
             },
         ],
     },
@@ -814,140 +874,17 @@ var allDemoGroups = [
                 options: stepDemos.stepTimeSeriesOptions,
                 data: stepDemos.stepTimeSeriesData,
                 chartType: chartTypes.LineChart,
+                mainDemo: true
             },
             {
                 options: stepDemos.stepEmptyStateOptions,
                 data: stepDemos.stepEmptyStateData,
                 chartType: chartTypes.LineChart,
-                isDemoExample: false,
             },
             {
                 options: stepDemos.stepSkeletonOptions,
                 data: stepDemos.stepSkeletonData,
                 chartType: chartTypes.LineChart,
-                isDemoExample: false,
-            },
-        ],
-    },
-    {
-        title: 'Time series axis',
-        demos: [
-            {
-                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: timeSeriesAxisDemos.lineTimeSeriesHourlyDefaultLocaleOptions,
-                data: timeSeriesAxisDemos.lineTimeSeriesDataHourlyDefaultTicksFormats,
-                chartType: chartTypes.LineChart,
-                isDemoExample: false,
-            },
-            {
-                options: timeSeriesAxisDemos.lineTimeSeriesHourlyCustomTicksFormatsOptions,
-                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: timeSeriesAxisDemos.lineTimeSeriesDataMonthlyDefaultLocale,
-                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: timeSeriesAxisDemos.lineTimeSeriesDataAllLabelsInPrimaryFormat,
-                options: timeSeriesAxisDemos.lineTimeSeriesAllLabelsInPrimaryFormatOptions,
-                chartType: chartTypes.LineChart,
-                isDemoExample: false,
-            },
-        ],
-    },
-    {
-        title: 'Treemap',
-        demos: [
-            {
-                data: treemapDemos.treemapData,
-                options: treemapDemos.treemapOptions,
-                chartType: chartTypes.TreemapChart,
-            },
-        ],
-    },
-    {
-        title: 'Toolbar (alpha)',
-        demos: [
-            {
-                options: toolbarDemos.toolbarStackedBarTimeSeriesOptions,
-                data: toolbarDemos.toolbarStackedBarTimeSeriesData,
-                chartType: chartTypes.StackedBarChart,
-                isDemoExample: false,
-            },
-            {
-                options: toolbarDemos.toolbarLineTimeSeriesOptions,
-                data: toolbarDemos.toolbarLineTimeSeriesData,
-                chartType: chartTypes.LineChart,
-                isDemoExample: false,
             },
         ],
     },
@@ -958,93 +895,32 @@ var allDemoGroups = [
                 options: wordCloudDemos.wordCloudOptions,
                 data: wordCloudDemos.wordCloudData,
                 chartType: chartTypes.WordCloudChart,
+                mainDemo: true
             },
         ],
     },
+].map(function (demoGroup) {
+    demoGroup.type = DemoGroupTypes.SIMPLE_CHART;
+    return demoGroup;
+});
+var complexChartDemos = [
     {
-        title: 'Zoom bar (alpha)',
+        title: 'Treemap',
         demos: [
             {
-                options: zoomBarDemos.zoomBarStackedAreaTimeSeriesOptions,
-                data: zoomBarDemos.zoomBarStackedAreaTimeSeriesData,
-                chartType: chartTypes.StackedAreaChart,
-                isDemoExample: false,
-            },
-            {
-                options: zoomBarDemos.zoomBarSimpleBarTimeSeriesOptions,
-                data: zoomBarDemos.zoomBarSimpleBarTimeSeriesData,
-                chartType: chartTypes.SimpleBarChart,
-                isDemoExample: false,
-            },
-            {
-                options: zoomBarDemos.zoomBarStackedBarTimeSeriesOptions,
-                data: zoomBarDemos.zoomBarStackedBarTimeSeriesData,
-                chartType: chartTypes.StackedBarChart,
-                isDemoExample: false,
-            },
-            {
-                options: zoomBarDemos.definedZoomBarStackedBarTimeSeriesOptions,
-                data: zoomBarDemos.definedZoomBarStackedBarTimeSeriesData,
-                chartType: chartTypes.StackedBarChart,
-                isDemoExample: false,
-            },
-            {
-                options: zoomBarDemos.zoomBarBubbleTimeSeriesOptions,
-                data: zoomBarDemos.zoomBarBubbleTimeSeriesData,
-                chartType: chartTypes.BubbleChart,
-                isDemoExample: false,
-            },
-            {
-                options: zoomBarDemos.zoomBarLineTimeSeriesOptions,
-                data: zoomBarDemos.zoomBarLineTimeSeriesData,
-                chartType: chartTypes.LineChart,
-                isDemoExample: false,
-            },
-            {
-                options: zoomBarDemos.zoomBarScatterTimeSeriesOptions,
-                data: zoomBarDemos.zoomBarScatterTimeSeriesData,
-                chartType: chartTypes.ScatterChart,
-                isDemoExample: false,
-            },
-            {
-                options: zoomBarDemos.zoomBarStepTimeSeriesOptions,
-                data: zoomBarDemos.zoomBarStepTimeSeriesData,
-                chartType: chartTypes.LineChart,
-                isDemoExample: false,
-            },
-            {
-                options: zoomBarDemos.zoomBarLineTimeSeries15secondsOptions,
-                data: zoomBarDemos.zoomBarLineTimeSeries15secondsData,
-                chartType: chartTypes.LineChart,
-                isDemoExample: false,
-            },
-            {
-                options: zoomBarDemos.zoomBarLineTimeSeriesInitDomainOptions,
-                data: zoomBarDemos.zoomBarLineTimeSeriesInitDomainData,
-                chartType: chartTypes.LineChart,
-                isDemoExample: false,
-            },
-            {
-                options: zoomBarDemos.zoomBarStringDateOptions,
-                data: zoomBarDemos.zoomBarStringDateData,
-                chartType: chartTypes.LineChart,
-                isDemoExample: false,
-            },
-            {
-                options: zoomBarDemos.zoomBarLockedOptions,
-                data: zoomBarDemos.zoomBarLockedData,
-                chartType: chartTypes.StackedBarChart,
-                isDemoExample: false,
-            },
-            {
-                options: zoomBarDemos.zoomBarSkeletonOptions,
-                data: zoomBarDemos.zoomBarSkeletonData,
-                chartType: chartTypes.StackedBarChart,
-                isDemoExample: false,
+                data: treemapDemos.treemapData,
+                options: treemapDemos.treemapOptions,
+                chartType: chartTypes.TreemapChart,
             },
         ],
     },
-];
+].map(function (demoGroup) {
+    demoGroup.type = DemoGroupTypes.COMPLEX_CHART;
+    return demoGroup;
+});
+var allDemoGroups = utilityDemoGroups
+    .concat(simpleChartDemos)
+    .concat(complexChartDemos);
 var devOnlyDemoGroups = [
     {
         title: 'High scale tests (DEV)',
@@ -1054,7 +930,6 @@ var devOnlyDemoGroups = [
                 data: [],
                 isHighScale: true,
                 chartType: chartTypes.LineChart,
-                isDemoExample: false,
             },
         ],
     },
@@ -1067,7 +942,18 @@ var formatTitleString = function (str) {
         .replace(/\s+/g, '-');
 };
 var mapDemoGroups = function (demoGroups) {
-    return demoGroups.map(function (demoGroup) {
+    return demoGroups
+        .sort(function (a, b) { return b.title - a.title; })
+        .map(function (demoGroup) {
+        if (demoGroup.type === DemoGroupTypes.SIMPLE_CHART) {
+            demoGroup.storyGroupTitle = 'Simple charts';
+        }
+        else if (demoGroup.type === DemoGroupTypes.COMPLEX_CHART) {
+            demoGroup.storyGroupTitle = 'Complex charts';
+        }
+        else {
+            demoGroup.storyGroupTitle = 'Utility';
+        }
         demoGroup.demos = demoGroup.demos.map(function (demo) {
             var _a;
             demo.title = demo.options.title;
@@ -1098,15 +984,4 @@ if (process.env.NODE_ENV !== 'production') {
 }
 // in the storybook we want to show all the demos
 export var storybookDemoGroups = allDemoGroups;
-// in the demo page we want to show only demos with isDemoExample = true
-export var demoGroups = Tools.clone(allDemoGroups)
-    // remove demoGroup if its children don't have any demo examples
-    .filter(function (demoGroup) {
-    return demoGroup.demos.filter(function (demo) { return demo.isDemoExample !== false; })
-        .length > 0;
-})
-    .map(function (demoGroup) {
-    demoGroup.demos = demoGroup.demos.filter(function (demo) { return demo.isDemoExample !== false; });
-    return demoGroup;
-});
 //# sourceMappingURL=../../../demo/data/index.js.map