@carbon/charts 1.7.6 → 1.9.0-rc.0

package/demo/data/index.js

@@ -1,1265 +0,0 @@
-import * as areaDemos from './area';
-import * as barDemos from './bar';
-import * as boxplotDemos from './boxplot';
-import * as bubbleDemos from './bubble';
-import * as bulletDemos from './bullet';
-import * as comboDemos from './combo';
-import * as donutDemos from './donut';
-import * as gaugeDemos from './gauge';
-import * as histogramDemos from './histogram';
-import * as lineDemos from './line';
-import * as lollipopDemos from './lollipop';
-import * as meterDemos from './meter';
-import * as pieDemos from './pie';
-import * as radarDemos from './radar';
-import * as scatterDemos from './scatter';
-import * as stepDemos from './step';
-import * as timeSeriesAxisDemos from './time-series-axis';
-import * as treeDemos from './tree';
-import * as treemapDemos from './treemap';
-import * as circlePackDemos from './circle-pack';
-import * as toolbarDemos from './toolbar';
-import * as wordCloudDemos from './wordcloud';
-import * as zoomBarDemos from './zoom-bar';
-import * as highScaleDemos from './high-scale';
-import * as alluvialDemos from './alluvial';
-import * as highlightDemos from './hightlight';
-import * as heatmapDemos from './heatmap';
-export * from './area';
-export * from './bar';
-export * from './boxplot';
-export * from './bubble';
-export * from './bullet';
-export * from './combo';
-export * from './donut';
-export * from './gauge';
-export * from './histogram';
-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 './circle-pack';
-export * from './toolbar';
-export * from './wordcloud';
-export * from './zoom-bar';
-export * from './high-scale';
-export * from './alluvial';
-export * from './heatmap';
-import { createChartSandbox, createReactChartApp, createAngularChartApp, createVueChartApp, createVanillaChartApp, createSvelteChartApp, } from '../create-codesandbox';
-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,
-            },
-            {
-                options: lineDemos.lineLogAxisOptions,
-                data: lineDemos.lineLogAxisData,
-                chartType: chartTypes.LineChart,
-            },
-        ],
-    },
-    {
-        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,
-            },
-        ],
-    },
-    {
-        title: 'Colors',
-        demos: [
-            {
-                options: barDemos.simpleBarColorOverrideOptions,
-                data: barDemos.simpleBarData,
-                chartType: chartTypes.SimpleBarChart,
-            },
-            {
-                options: lineDemos.lineCustomColorOptions,
-                data: lineDemos.lineData,
-                chartType: chartTypes.LineChart,
-            },
-            {
-                options: circlePackDemos.circlePackTwoLevelCustomColorsOptions,
-                data: circlePackDemos.circlePackTwoLevelData,
-                chartType: chartTypes.CirclePackChart,
-            },
-            {
-                options: alluvialDemos.alluvialSimpleCustomColorOptions,
-                data: alluvialDemos.alluvialSimpleData,
-                chartType: chartTypes.AlluvialChart,
-            },
-        ],
-    },
-    {
-        title: 'Legend',
-        demos: [
-            {
-                options: barDemos.simpleBarCenteredLegendOptions,
-                data: barDemos.simpleBarCenteredLegendData,
-                chartType: chartTypes.SimpleBarChart,
-            },
-            {
-                options: barDemos.simpleBarCustomLegendOrderOptions,
-                data: barDemos.simpleBarData,
-                chartType: chartTypes.SimpleBarChart,
-            },
-            {
-                options: barDemos.simpleBarAdditionalLegendItemsOptions,
-                data: barDemos.simpleBarData,
-                chartType: chartTypes.SimpleBarChart,
-            },
-            {
-                options: barDemos.groupedBarSelectedGroupsOptions,
-                data: barDemos.groupedBarSelectedGroupsData,
-                chartType: chartTypes.GroupedBarChart,
-            },
-            {
-                options: lineDemos.lineSelectedGroupsOptions,
-                data: lineDemos.lineSelectedGroupsData,
-                chartType: chartTypes.LineChart,
-            },
-            {
-                options: lineDemos.lineOptionsLegendOrientation,
-                data: lineDemos.lineData,
-                chartType: chartTypes.LineChart,
-            },
-        ],
-    },
-    {
-        title: 'Locale',
-        demos: [
-            {
-                options: barDemos.simpleBarTurkishLocaleOptions,
-                data: barDemos.simpleBarTurkishLocaleData,
-                chartType: chartTypes.SimpleBarChart,
-            },
-        ],
-    },
-    {
-        title: 'Thresholds',
-        demos: [
-            {
-                options: lineDemos.lineTimeSeriesWithThresholdsOptions,
-                data: lineDemos.lineTimeSeriesData,
-                chartType: chartTypes.LineChart,
-            },
-        ],
-    },
-    {
-        title: 'Highlights',
-        demos: [
-            {
-                options: highlightDemos.boundedAreaTimeSeriesWithHighlightsOptions,
-                data: highlightDemos.highlightBoundedAreaTimeSeriesData,
-                chartType: chartTypes.AreaChart,
-            },
-            {
-                options: highlightDemos.boundedAreaTimeSeriesWithHighlightsZoomOptions,
-                data: highlightDemos.highlightBoundedAreaTimeSeriesData,
-                chartType: chartTypes.AreaChart,
-            },
-        ],
-    },
-    {
-        title: 'Toolbar',
-        demos: [
-            {
-                options: toolbarDemos.toolbarStackedBarTimeSeriesOptions,
-                data: toolbarDemos.toolbarStackedBarTimeSeriesData,
-                chartType: chartTypes.StackedBarChart,
-            },
-            {
-                options: toolbarDemos.toolbarLineTimeSeriesOptions,
-                data: toolbarDemos.toolbarLineTimeSeriesData,
-                chartType: chartTypes.LineChart,
-            },
-        ],
-    },
-    {
-        title: 'Truncations',
-        demos: [
-            {
-                options: barDemos.simpleHorizontalBarLongLabelOptions,
-                data: barDemos.simpleHorizontalBarLongLabelData,
-                chartType: chartTypes.SimpleBarChart,
-            },
-            {
-                options: lineDemos.lineLongLabelOptions,
-                data: lineDemos.lineLongLabelData,
-                chartType: chartTypes.LineChart,
-            },
-        ],
-    },
-    {
-        title: 'Zoom bar',
-        demos: [
-            {
-                options: zoomBarDemos.zoomBarStackedAreaTimeSeriesOptions,
-                data: zoomBarDemos.zoomBarStackedAreaTimeSeriesData,
-                chartType: chartTypes.StackedAreaChart,
-            },
-            {
-                options: zoomBarDemos.zoomBarSimpleBarTimeSeriesOptions,
-                data: zoomBarDemos.zoomBarSimpleBarTimeSeriesData,
-                chartType: chartTypes.SimpleBarChart,
-            },
-            {
-                options: zoomBarDemos.zoomBarGroupedBarTimeSeriesOptions,
-                data: zoomBarDemos.zoomBarGroupedBarTimeSeriesData,
-                chartType: chartTypes.GroupedBarChart,
-            },
-            {
-                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,
-            },
-        ],
-    },
-].map(function (demoGroup) {
-    demoGroup.type = DemoGroupTypes.UTILITY;
-    return demoGroup;
-});
-var simpleChartDemos = [
-    {
-        title: 'Area (simple)',
-        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,
-                mainDemo: true,
-            },
-            {
-                options: areaDemos.areaTimeSeriesOptions,
-                data: areaDemos.areaTimeSeriesData,
-                chartType: chartTypes.AreaChart,
-            },
-            {
-                options: areaDemos.areaDiscreteDomainOptions,
-                data: areaDemos.areaDiscreteDomain,
-                chartType: chartTypes.AreaChart,
-            },
-            {
-                options: areaDemos.boundedAreaTimeSeriesOptions,
-                data: areaDemos.boundedAreaTimeSeriesData,
-                chartType: chartTypes.AreaChart,
-            },
-            {
-                options: areaDemos.areaSkeletonOptions,
-                data: areaDemos.areaSkeletonData,
-                chartType: chartTypes.AreaChart,
-            },
-            {
-                options: areaDemos.areaEmptyOptions,
-                data: areaDemos.areaEmptyData,
-                chartType: chartTypes.AreaChart,
-            },
-        ],
-    },
-    {
-        title: 'Area (stacked)',
-        demos: [
-            {
-                options: areaDemos.stackedAreaTimeSeriesOptions,
-                data: areaDemos.stackedAreaTimeSeriesData,
-                chartType: chartTypes.StackedAreaChart,
-                mainDemo: true,
-            },
-            {
-                options: areaDemos.stackedAreaTimeSeriesUnevenDataOptions,
-                data: areaDemos.stackedAreaTimeSeriesUnevenData,
-                chartType: chartTypes.StackedAreaChart,
-            },
-            {
-                options: areaDemos.stackedAreaPercentageTimeSeriesOptions,
-                data: areaDemos.stackedAreaTimeSeriesData,
-                chartType: chartTypes.StackedAreaChart,
-            },
-        ],
-    },
-    {
-        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: [
-            {
-                options: barDemos.simpleBarOptions,
-                data: barDemos.simpleBarData,
-                chartType: chartTypes.SimpleBarChart,
-            },
-            {
-                options: barDemos.simpleBarTimeSeriesOptions,
-                data: barDemos.simpleBarTimeSeriesData,
-                chartType: chartTypes.SimpleBarChart,
-            },
-            {
-                options: barDemos.simpleBarTimeSeriesDenseOptions,
-                data: barDemos.simpleBarTimeSeriesDenseData,
-                chartType: chartTypes.SimpleBarChart,
-            },
-            {
-                options: barDemos.simpleBarEmptyStateOptions,
-                data: barDemos.simpleBarEmptyStateData,
-                chartType: chartTypes.SimpleBarChart,
-            },
-            {
-                options: barDemos.simpleBarSkeletonOptions,
-                data: barDemos.simpleBarSkeletonData,
-                chartType: chartTypes.SimpleBarChart,
-            },
-            {
-                options: barDemos.simpleHorizontalBarOptions,
-                data: barDemos.simpleHorizontalBarData,
-                chartType: chartTypes.SimpleBarChart,
-                mainDemo: true,
-            },
-            {
-                options: barDemos.simpleHorizontalBarTimeSeriesOptions,
-                data: barDemos.simpleHorizontalBarTimeSeriesData,
-                chartType: chartTypes.SimpleBarChart,
-            },
-            {
-                options: barDemos.simpleHorizontalBarEmptyStateOptions,
-                data: barDemos.simpleHorizontalBarEmptyStateData,
-                chartType: chartTypes.SimpleBarChart,
-            },
-            {
-                options: barDemos.simpleHorizontalBarSkeletonOptions,
-                data: barDemos.simpleHorizontalBarSkeletonData,
-                chartType: chartTypes.SimpleBarChart,
-            },
-        ],
-    },
-    {
-        title: 'Bar (floating)',
-        demos: [
-            {
-                options: barDemos.floatingHorizontalBarTimeSeriesOptions,
-                data: barDemos.floatingHorizontalBarTimeSeriesData,
-                chartType: chartTypes.SimpleBarChart,
-                mainDemo: true,
-            },
-            {
-                options: barDemos.floatingBarOptions,
-                data: barDemos.floatingBarData,
-                chartType: chartTypes.SimpleBarChart,
-            },
-            {
-                options: barDemos.floatingHorizontalBarOptions,
-                data: barDemos.floatingHorizontalBarData,
-                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.groupedBarOptions,
-                data: barDemos.groupedBarData,
-                chartType: chartTypes.GroupedBarChart,
-                mainDemo: true,
-            },
-            {
-                options: barDemos.groupedBarTimeSeriesOptions,
-                data: barDemos.groupedBarTimeSeriesData,
-                chartType: chartTypes.GroupedBarChart,
-            },
-            {
-                options: barDemos.groupedBarTimeSeriesDenseOptions,
-                data: barDemos.groupedBarTimeSeriesDenseData,
-                chartType: chartTypes.GroupedBarChart,
-            },
-            {
-                options: barDemos.groupedBarEmptyStateOptions,
-                data: barDemos.groupedBarEmptyStateData,
-                chartType: chartTypes.GroupedBarChart,
-            },
-            {
-                options: barDemos.groupedBarSkeletonOptions,
-                data: barDemos.groupedBarSkeletonData,
-                chartType: chartTypes.GroupedBarChart,
-            },
-            {
-                options: barDemos.groupedHorizontalBarOptions,
-                data: barDemos.groupedHorizontalBarData,
-                chartType: chartTypes.GroupedBarChart,
-            },
-            {
-                options: barDemos.groupedBarHorizontalTimeSeriesOptions,
-                data: barDemos.groupedBarTimeSeriesData,
-                chartType: chartTypes.GroupedBarChart,
-            },
-            {
-                options: barDemos.groupedHorizontalBarEmptyStateOptions,
-                data: barDemos.groupedHorizontalBarEmptyStateData,
-                chartType: chartTypes.GroupedBarChart,
-            },
-            {
-                options: barDemos.groupedHorizontalBarSkeletonOptions,
-                data: barDemos.groupedHorizontalBarSkeletonData,
-                chartType: chartTypes.GroupedBarChart,
-            },
-        ],
-    },
-    {
-        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: [
-            {
-                options: barDemos.stackedBarOptions,
-                data: barDemos.stackedBarData,
-                chartType: chartTypes.StackedBarChart,
-            },
-            {
-                options: barDemos.stackedBarNegativeOptions,
-                data: barDemos.stackedBarNegativeData,
-                chartType: chartTypes.StackedBarChart,
-            },
-            {
-                options: barDemos.stackedBarTimeSeriesOptions,
-                data: barDemos.stackedBarTimeSeriesData,
-                chartType: chartTypes.StackedBarChart,
-            },
-            {
-                options: barDemos.stackedBarShortIntervalTimeSeriesOptions,
-                data: barDemos.stackedBarShortIntervalTimeSeriesData,
-                chartType: chartTypes.StackedBarChart,
-            },
-            {
-                options: barDemos.stackedBarEmptyStateOptions,
-                data: barDemos.stackedBarEmptyStateData,
-                chartType: chartTypes.StackedBarChart,
-            },
-            {
-                options: barDemos.stackedBarSkeletonOptions,
-                data: barDemos.stackedBarSkeletonData,
-                chartType: chartTypes.StackedBarChart,
-            },
-            {
-                options: barDemos.stackedHorizontalBarOptions,
-                data: barDemos.stackedHorizontalBarData,
-                chartType: chartTypes.StackedBarChart,
-                mainDemo: true,
-            },
-            {
-                options: barDemos.stackedHorizontalBarTimeSeriesOptions,
-                data: barDemos.stackedHorizontalBarTimeSeriesData,
-                chartType: chartTypes.StackedBarChart,
-            },
-            {
-                options: barDemos.stackedHorizontalBarEmptyStateOptions,
-                data: barDemos.stackedHorizontalBarEmptyStateData,
-                chartType: chartTypes.StackedBarChart,
-            },
-            {
-                options: barDemos.stackedHorizontalBarSkeletonOptions,
-                data: barDemos.stackedHorizontalBarSkeletonData,
-                chartType: chartTypes.StackedBarChart,
-            },
-        ],
-    },
-    {
-        title: 'Boxplot',
-        demos: [
-            {
-                options: boxplotDemos.simpleBoxplotOptions,
-                data: boxplotDemos.simpleBoxplotData,
-                chartType: chartTypes.BoxplotChart,
-                mainDemo: true,
-            },
-            {
-                options: boxplotDemos.simpleVerticalBoxplotOptions,
-                data: boxplotDemos.simpleVerticalBoxplotData,
-                chartType: chartTypes.BoxplotChart,
-            },
-        ],
-    },
-    {
-        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,
-                mainDemo: true,
-            },
-            {
-                options: bubbleDemos.bubbleTimeSeriesOptions,
-                data: bubbleDemos.bubbleTimeSeriesData,
-                chartType: chartTypes.BubbleChart,
-            },
-            {
-                options: bubbleDemos.bubbleDiscreteOptions,
-                data: bubbleDemos.bubbleDiscreteData,
-                chartType: chartTypes.BubbleChart,
-            },
-            {
-                options: bubbleDemos.bubbleDualDiscreteOptions,
-                data: bubbleDemos.bubbleDualDiscreteData,
-                chartType: chartTypes.BubbleChart,
-            },
-            {
-                options: bubbleDemos.bubbleEmptyStateOptions,
-                data: bubbleDemos.bubbleEmptyStateData,
-                chartType: chartTypes.BubbleChart,
-            },
-            {
-                options: bubbleDemos.bubbleSkeletonOptions,
-                data: bubbleDemos.bubbleSkeletonData,
-                chartType: chartTypes.BubbleChart,
-            },
-        ],
-    },
-    {
-        title: 'Bullet',
-        demos: [
-            {
-                options: bulletDemos.basicBulletOptions,
-                data: bulletDemos.basicBulletData,
-                chartType: chartTypes.BulletChart,
-            },
-        ],
-    },
-    {
-        title: 'Combo',
-        demos: [
-            {
-                options: comboDemos.comboSimpleOptions,
-                data: comboDemos.comboSimpleData,
-                chartType: chartTypes.ComboChart,
-            },
-            {
-                options: comboDemos.comboStackedOptions,
-                data: comboDemos.comboStackedData,
-                chartType: chartTypes.ComboChart,
-            },
-            {
-                options: comboDemos.comboGroupedOptions,
-                data: comboDemos.comboGroupedData,
-                chartType: chartTypes.ComboChart,
-            },
-            {
-                options: comboDemos.comboSimpleFloatingOptions,
-                data: comboDemos.comboSimpleFloatingData,
-                chartType: chartTypes.ComboChart,
-            },
-            {
-                options: comboDemos.comboGroupedHorizontalOptions,
-                data: comboDemos.comboGroupedHorizontalData,
-                chartType: chartTypes.ComboChart,
-            },
-            {
-                options: comboDemos.comboHorizontalOptions,
-                data: comboDemos.comboHorizontalData,
-                chartType: chartTypes.ComboChart,
-            },
-            {
-                options: comboDemos.comboAreaLineOptions,
-                data: comboDemos.comboAreaLineData,
-                chartType: chartTypes.ComboChart,
-            },
-            {
-                options: comboDemos.comboStackedAreaLineOptions,
-                data: comboDemos.comboStackedAreaLine,
-                chartType: chartTypes.ComboChart,
-            },
-            {
-                options: comboDemos.comboLineScatterOptions,
-                data: comboDemos.comboLineScatterData,
-                chartType: chartTypes.ComboChart,
-            },
-            {
-                options: comboDemos.comboAreaLineTimeSeriesOptions,
-                data: comboDemos.comboAreaLineTimeSeriesData,
-                chartType: chartTypes.ComboChart,
-                mainDemo: true,
-            },
-            {
-                options: comboDemos.comboEmptyOptions,
-                data: comboDemos.comboEmptyData,
-                chartType: chartTypes.ComboChart,
-            },
-            {
-                options: comboDemos.comboLoadingOptions,
-                data: comboDemos.comboLoadingData,
-                chartType: chartTypes.ComboChart,
-            },
-        ],
-    },
-    {
-        title: 'Donut',
-        demos: [
-            {
-                options: donutDemos.donutOptions,
-                data: donutDemos.donutData,
-                chartType: chartTypes.DonutChart,
-                mainDemo: true,
-            },
-            {
-                options: donutDemos.donutCenteredOptions,
-                data: donutDemos.donutCenteredData,
-                chartType: chartTypes.DonutChart,
-            },
-            {
-                options: donutDemos.donutMapsToOptions,
-                data: donutDemos.donutDataMapsTo,
-                chartType: chartTypes.DonutChart,
-            },
-            {
-                options: donutDemos.donutEmptyStateOptions,
-                data: donutDemos.donutEmptyStateData,
-                chartType: chartTypes.DonutChart,
-            },
-            {
-                options: donutDemos.donutSkeletonOptions,
-                data: donutDemos.donutSkeletonData,
-                chartType: chartTypes.DonutChart,
-            },
-        ],
-    },
-    {
-        title: 'Gauge',
-        demos: [
-            {
-                options: gaugeDemos.gaugeOptionsSemi,
-                data: gaugeDemos.gaugeData,
-                chartType: chartTypes.GaugeChart,
-                mainDemo: true,
-            },
-            {
-                options: gaugeDemos.gaugeOptionsCircular,
-                data: gaugeDemos.gaugeData,
-                chartType: chartTypes.GaugeChart,
-            },
-            {
-                options: gaugeDemos.gaugeOptionsCircularNoDelta,
-                data: gaugeDemos.gaugeDataNoDelta,
-                chartType: chartTypes.GaugeChart,
-            },
-        ],
-    },
-    {
-        title: 'Histogram',
-        demos: [
-            {
-                options: histogramDemos.histogramContinueOptions,
-                data: histogramDemos.histogramContinueData,
-                chartType: chartTypes.HistogramChart,
-            },
-            {
-                options: histogramDemos.histogramContinueWithBinsNumberOptions,
-                data: histogramDemos.histogramContinueWithBinsNumberData,
-                chartType: chartTypes.HistogramChart,
-            },
-            {
-                options: histogramDemos.histogramContinueWithBinsOptions,
-                data: histogramDemos.histogramContinueData,
-                chartType: chartTypes.HistogramChart,
-            },
-        ],
-    },
-    {
-        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.lineOptions,
-                data: lineDemos.lineData,
-                chartType: chartTypes.LineChart,
-            },
-            {
-                options: lineDemos.lineTimeSeriesOptions,
-                data: lineDemos.lineTimeSeriesData,
-                chartType: chartTypes.LineChart,
-                mainDemo: true,
-            },
-            {
-                options: lineDemos.lineTimeSeriesDenseOptions,
-                data: lineDemos.lineTimeSeriesDenseData,
-                chartType: chartTypes.LineChart,
-            },
-            {
-                options: lineDemos.dualLine,
-                data: lineDemos.lineTimeSeriesDualAxesData,
-                chartType: chartTypes.LineChart,
-            },
-            {
-                options: lineDemos.lineEmptyStateOptions,
-                data: lineDemos.lineEmptyStateData,
-                chartType: chartTypes.LineChart,
-            },
-            {
-                options: lineDemos.lineSkeletonOptions,
-                data: lineDemos.lineSkeletonData,
-                chartType: chartTypes.LineChart,
-            },
-        ],
-    },
-    {
-        title: 'Lollipop',
-        demos: [
-            {
-                options: lollipopDemos.lollipopDiscreteOptions,
-                data: lollipopDemos.lollipopDiscreteData,
-                chartType: chartTypes.LollipopChart,
-            },
-            {
-                options: lollipopDemos.lollipopDiscretePresentationOptions,
-                data: lollipopDemos.lollipopDiscretePresentationData,
-                chartType: chartTypes.LollipopChart,
-                mainDemo: true,
-            },
-        ],
-    },
-    {
-        title: 'Pie',
-        demos: [
-            {
-                options: pieDemos.pieOptions,
-                data: pieDemos.pieData,
-                chartType: chartTypes.PieChart,
-                mainDemo: true,
-            },
-            {
-                options: pieDemos.pieCenteredOptions,
-                data: pieDemos.pieCenteredData,
-                chartType: chartTypes.PieChart,
-            },
-            {
-                options: pieDemos.pieMapToOptions,
-                data: pieDemos.pieDataMapsTo,
-                chartType: chartTypes.PieChart,
-            },
-            {
-                options: pieDemos.pieEmptyStateOptions,
-                data: pieDemos.pieEmptyStateData,
-                chartType: chartTypes.PieChart,
-            },
-            {
-                options: pieDemos.pieSkeletonOptions,
-                data: pieDemos.pieSkeletonData,
-                chartType: chartTypes.PieChart,
-            },
-        ],
-    },
-    {
-        title: 'Meter',
-        demos: [
-            {
-                options: meterDemos.meterOptionsWithStatus,
-                data: meterDemos.meterData,
-                chartType: chartTypes.MeterChart,
-                mainDemo: true,
-            },
-            {
-                options: meterDemos.meterOptionsCustomColor,
-                data: meterDemos.meterData,
-                chartType: chartTypes.MeterChart,
-            },
-            {
-                options: meterDemos.meterOptionsNoStatus,
-                data: meterDemos.meterData,
-                chartType: chartTypes.MeterChart,
-            },
-        ],
-    },
-    {
-        title: 'Meter (proportional)',
-        demos: [
-            {
-                options: meterDemos.propMeterOptions,
-                data: meterDemos.propMeterData,
-                chartType: chartTypes.MeterChart,
-            },
-            {
-                options: meterDemos.propMeterStatusOptions,
-                data: meterDemos.propMeterData,
-                chartType: chartTypes.MeterChart,
-            },
-            {
-                options: meterDemos.propMeterTruncationOptions,
-                data: meterDemos.propMeterData,
-                chartType: chartTypes.MeterChart,
-            },
-        ],
-    },
-    {
-        title: 'Radar',
-        demos: [
-            {
-                data: radarDemos.radarData,
-                options: radarDemos.radarOptions,
-                chartType: chartTypes.RadarChart,
-                mainDemo: true,
-            },
-            {
-                data: radarDemos.radarCenteredData,
-                options: radarDemos.radarCenteredOptions,
-                chartType: chartTypes.RadarChart,
-            },
-            {
-                data: radarDemos.radarWithMissingDataData,
-                options: radarDemos.radarWithMissingDataOptions,
-                chartType: chartTypes.RadarChart,
-            },
-            {
-                data: radarDemos.radarDenseData,
-                options: radarDemos.radarDenseOptions,
-                chartType: chartTypes.RadarChart,
-            },
-        ],
-    },
-    {
-        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,
-            },
-            {
-                options: scatterDemos.scatterTimeSeriesOptions,
-                data: scatterDemos.scatterTimeSeriesData,
-                chartType: chartTypes.ScatterChart,
-                mainDemo: true,
-            },
-            {
-                options: scatterDemos.scatterDiscreteOptions,
-                data: scatterDemos.scatterDiscreteData,
-                chartType: chartTypes.ScatterChart,
-            },
-            {
-                options: scatterDemos.scatterDualAxesOptions,
-                data: scatterDemos.scatterDualAxesData,
-                chartType: chartTypes.ScatterChart,
-            },
-            {
-                options: scatterDemos.scatterEmptyStateOptions,
-                data: scatterDemos.scatterEmptyStateData,
-                chartType: chartTypes.ScatterChart,
-            },
-            {
-                options: scatterDemos.scatterSkeletonOptions,
-                data: scatterDemos.scatterSkeletonData,
-                chartType: chartTypes.ScatterChart,
-            },
-        ],
-    },
-    {
-        title: 'Sparkline',
-        demos: [
-            {
-                options: areaDemos.sparklineOptions,
-                data: areaDemos.sparklineTimeSeriesData,
-                chartType: chartTypes.AreaChart,
-                mainDemo: true,
-            },
-            {
-                options: lineDemos.sparklineLoadingOptions,
-                data: lineDemos.lineSkeletonData,
-                chartType: chartTypes.LineChart,
-            },
-        ],
-    },
-    {
-        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,
-            },
-            {
-                options: stepDemos.stepTimeSeriesOptions,
-                data: stepDemos.stepTimeSeriesData,
-                chartType: chartTypes.LineChart,
-                mainDemo: true,
-            },
-            {
-                options: stepDemos.stepEmptyStateOptions,
-                data: stepDemos.stepEmptyStateData,
-                chartType: chartTypes.LineChart,
-            },
-            {
-                options: stepDemos.stepSkeletonOptions,
-                data: stepDemos.stepSkeletonData,
-                chartType: chartTypes.LineChart,
-            },
-        ],
-    },
-    {
-        title: 'Word Cloud',
-        demos: [
-            {
-                options: wordCloudDemos.wordCloudOptions,
-                data: wordCloudDemos.wordCloudData,
-                chartType: chartTypes.WordCloudChart,
-                mainDemo: true,
-            },
-        ],
-    },
-].map(function (demoGroup) {
-    demoGroup.type = DemoGroupTypes.SIMPLE_CHART;
-    return demoGroup;
-});
-var complexChartDemos = [
-    {
-        title: 'Alluvial',
-        demos: [
-            {
-                options: alluvialDemos.alluvialSimpleGradientOptions,
-                data: alluvialDemos.alluvialGradientData,
-                chartType: chartTypes.AlluvialChart,
-                mainDemo: true,
-            },
-            {
-                options: alluvialDemos.alluvialSimpleOptions,
-                data: alluvialDemos.alluvialSimpleData,
-                chartType: chartTypes.AlluvialChart,
-            },
-            {
-                options: alluvialDemos.alluvialMultipleCategoryOptions,
-                data: alluvialDemos.alluvialMultipleCategoryData,
-                chartType: chartTypes.AlluvialChart,
-            },
-            {
-                options: alluvialDemos.alluvialMonochromeOptions,
-                data: alluvialDemos.alluvialMonochromeData,
-                chartType: chartTypes.AlluvialChart,
-            },
-            {
-                options: alluvialDemos.alluvialNodeAlignmentOptions,
-                data: alluvialDemos.alluvialNodeAlignmentData,
-                chartType: chartTypes.AlluvialChart,
-            },
-        ],
-    },
-    {
-        title: 'Circle Pack',
-        demos: [
-            {
-                data: circlePackDemos.circlePackSingleLevelData,
-                options: circlePackDemos.circlePackSingleOptions,
-                chartType: chartTypes.CirclePackChart,
-            },
-            {
-                data: circlePackDemos.circlePackTwoLevelData,
-                options: circlePackDemos.circlePackTwoLevelOptions,
-                chartType: chartTypes.CirclePackChart,
-            },
-            {
-                data: circlePackDemos.circlePackThreeLevelData,
-                options: circlePackDemos.circlePackThreeLevelOptions,
-                chartType: chartTypes.CirclePackChart,
-                mainDemo: true,
-            },
-            {
-                data: circlePackDemos.circlePackThreeLevelsMonochromeData,
-                options: circlePackDemos.circlePackThreeLevelsMonochromeOptions,
-                chartType: chartTypes.CirclePackChart,
-            },
-            {
-                data: circlePackDemos.circlePackThreeLevelData,
-                options: circlePackDemos.circlePackThreeLevelNoZoomOptions,
-                chartType: chartTypes.CirclePackChart,
-            },
-        ],
-    },
-    {
-        title: 'Heatmap',
-        configs: {
-            excludeColorPaletteControl: true,
-        },
-        demos: [
-            {
-                options: heatmapDemos.heatmapOptions,
-                data: heatmapDemos.heatmapData,
-                chartType: chartTypes.HeatmapChart,
-            },
-            {
-                options: heatmapDemos.heatmapQuantizeLegendOption,
-                data: heatmapDemos.heatmapData,
-                chartType: chartTypes.HeatmapChart,
-            },
-            {
-                options: heatmapDemos.heatmapPositiveNegativeOptions,
-                data: heatmapDemos.heatmapPositiveNegativeData,
-                chartType: chartTypes.HeatmapChart,
-            },
-            {
-                options: heatmapDemos.heatmapMissingDataOptions,
-                data: heatmapDemos.heatmapMissingData,
-                chartType: chartTypes.HeatmapChart,
-            },
-            {
-                options: heatmapDemos.heatmapDomainOptions,
-                data: heatmapDemos.heatmapData,
-                chartType: chartTypes.HeatmapChart,
-            },
-        ],
-    },
-    {
-        title: 'Tree',
-        configs: {
-            excludeColorPaletteControl: true,
-        },
-        demos: [
-            {
-                data: treeDemos.treeData,
-                options: treeDemos.dendogramOptions,
-                chartType: chartTypes.TreeChart,
-                mainDemo: true,
-            },
-            {
-                data: treeDemos.treeData,
-                options: treeDemos.treeOptions,
-                chartType: chartTypes.TreeChart,
-            },
-        ],
-    },
-    {
-        title: 'Treemap',
-        demos: [
-            {
-                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)',
-        demos: [
-            {
-                options: highScaleDemos.zoomBarHighScaleLineTimeSeriesOptions,
-                data: [],
-                isHighScale: true,
-                chartType: chartTypes.LineChart,
-            },
-        ],
-    },
-];
-var formatTitleString = function (str) {
-    return str
-        .replace(/[^\w\s]/gi, '')
-        .replace(/\s\s+/g, ' ')
-        .toLowerCase()
-        .replace(/\s+/g, '-');
-};
-var mapDemoGroups = function (demoGroups) {
-    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;
-            demo.id = formatTitleString(demoGroup.title) + "--" + formatTitleString(demo.options.title);
-            // if there isnt a height set in the chart options, use 400
-            demo.options.height = (_a = demo.options.height, (_a !== null && _a !== void 0 ? _a : '400px'));
-            if (!demo.codesandbox) {
-                demo.codesandbox = {};
-            }
-            demo.codesandbox.react = createChartSandbox(createReactChartApp(demo));
-            demo.codesandbox.vue = createChartSandbox(createVueChartApp(demo));
-            demo.codesandbox.vanilla = createChartSandbox(createVanillaChartApp(demo));
-            demo.codesandbox.svelte = createChartSandbox(createSvelteChartApp(demo));
-            if (!demo.code) {
-                demo.code = {};
-            }
-            demo.code.angular = createAngularChartApp(demo);
-            return demo;
-        });
-        return demoGroup;
-    });
-};
-// add codesandbox and code to demos
-allDemoGroups = mapDemoGroups(allDemoGroups);
-// Only add the high-scale testcases in dev
-if (process.env.NODE_ENV !== 'production') {
-    allDemoGroups = allDemoGroups.concat(mapDemoGroups(devOnlyDemoGroups));
-}
-// in the storybook we want to show all the demos
-export var storybookDemoGroups = allDemoGroups;
-//# sourceMappingURL=../../../demo/data/index.js.map