@cdc/chart 4.24.11 → 4.24.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cdcchart.js +31248 -31198
- package/examples/feature/sankey/sankey-example-data.json +126 -13
- package/examples/feature/tests-date-exclusions/date-exclusions-config.json +372 -12
- package/examples/private/DEV-8850-2.json +493 -0
- package/examples/private/DEV-9822.json +574 -0
- package/examples/private/DEV-9840.json +553 -0
- package/examples/private/DEV-9850-3.json +461 -0
- package/examples/private/chart.json +1084 -0
- package/examples/private/ci_formatted.json +202 -0
- package/examples/private/ci_issue.json +3016 -0
- package/examples/private/completed.json +634 -0
- package/examples/private/dem-data-long.csv +20 -0
- package/examples/private/dem-data-long.json +36 -0
- package/examples/private/demographic_data.csv +157 -0
- package/examples/private/demographic_data.json +2654 -0
- package/examples/private/demographic_dynamic.json +443 -0
- package/examples/private/demographic_standard.json +560 -0
- package/examples/private/test.json +448 -20047
- package/index.html +9 -6
- package/package.json +2 -2
- package/src/CdcChart.tsx +62 -82
- package/src/_stories/Chart.Anchors.stories.tsx +31 -0
- package/src/_stories/Chart.DynamicSeries.stories.tsx +8 -1
- package/src/_stories/Chart.stories.tsx +32 -0
- package/src/_stories/ChartAxisLabels.stories.tsx +4 -1
- package/{examples/feature/area/area-chart-date-city-temperature.json → src/_stories/_mock/area_chart_stacked.json} +125 -27
- package/src/_stories/_mock/line_chart_dynamic_ci.json +493 -0
- package/src/_stories/_mock/line_chart_non_dynamic_ci.json +522 -0
- package/src/_stories/_mock/short_dates.json +288 -0
- package/src/components/AreaChart/components/AreaChart.Stacked.jsx +15 -3
- package/src/components/Axis/Categorical.Axis.tsx +2 -2
- package/src/components/BarChart/components/BarChart.Horizontal.tsx +46 -37
- package/src/components/BarChart/components/BarChart.Vertical.tsx +28 -40
- package/src/components/BarChart/helpers/getBarData.ts +28 -0
- package/src/components/BarChart/helpers/tests/getBarData.test.ts +74 -0
- package/src/components/BoxPlot/BoxPlot.tsx +12 -70
- package/src/components/BoxPlot/helpers/index.ts +54 -0
- package/src/components/BrushChart.tsx +23 -26
- package/src/components/EditorPanel/EditorPanel.tsx +55 -79
- package/src/components/EditorPanel/components/Panels/Panel.Series.tsx +1 -0
- package/src/components/EditorPanel/useEditorPermissions.ts +5 -1
- package/src/components/Legend/Legend.Component.tsx +2 -2
- package/src/{hooks/useLegendClasses.ts → components/Legend/helpers/getLegendClasses.ts} +5 -5
- package/src/components/Legend/helpers/index.ts +2 -1
- package/src/components/Legend/tests/getLegendClasses.test.ts +115 -0
- package/src/components/LineChart/components/LineChart.Circle.tsx +1 -1
- package/src/components/LineChart/helpers.ts +1 -0
- package/src/components/LineChart/index.tsx +47 -1
- package/src/components/LinearChart.tsx +171 -172
- package/src/components/PieChart/PieChart.tsx +7 -1
- package/src/components/Sankey/components/ColumnList.tsx +19 -0
- package/src/components/Sankey/components/Sankey.tsx +479 -0
- package/src/components/Sankey/helpers/getSankeyTooltip.tsx +33 -0
- package/src/components/Sankey/index.tsx +1 -510
- package/src/components/Sankey/sankey.scss +16 -16
- package/src/components/Sankey/types/index.ts +1 -1
- package/src/data/initial-state.js +4 -3
- package/src/helpers/countNumOfTicks.ts +57 -0
- package/src/helpers/getQuartiles.ts +15 -18
- package/src/hooks/useMinMax.ts +18 -4
- package/src/hooks/useScales.ts +38 -4
- package/src/hooks/useTooltip.tsx +5 -1
- package/src/scss/DataTable.scss +5 -0
- package/src/scss/main.scss +6 -2
package/index.html
CHANGED
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
|
|
27
27
|
<body>
|
|
28
28
|
<!-- SANKEY EXAMPLE -->
|
|
29
|
-
<!-- <div class="container d-flex flex-wrap body-wrapper bg-white">
|
|
29
|
+
<!-- <div class="container d-flex flex-wrap body-wrapper bg-white" style="width: 750px">
|
|
30
30
|
<main class="col-lg-9 order-lg-2" role="main" aria-label="Main Content Area">
|
|
31
31
|
<div class="row">
|
|
32
32
|
<div class="col-md-12"> -->
|
|
@@ -49,7 +49,8 @@
|
|
|
49
49
|
-->
|
|
50
50
|
|
|
51
51
|
<!-- GENERIC CHART TYPES -->
|
|
52
|
-
|
|
52
|
+
<div class="react-container" data-config="/examples/private/demographic_standard.json"></div>
|
|
53
|
+
<div class="react-container" data-config="/examples/cases-year.json"></div>
|
|
53
54
|
<!-- <div class="react-container" data-config="/examples/test.json"></div> -->
|
|
54
55
|
<!-- <div class="react-container" data-config="/examples/feature/line/line-chart.json"></div> -->
|
|
55
56
|
<!-- <div class="react-container" data-config="/examples/dev-8332.json"></div> -->
|
|
@@ -57,7 +58,6 @@
|
|
|
57
58
|
<!-- <div class="react-container" data-config="/examples/feature/filters/url-filter.json"></div> -->
|
|
58
59
|
<!-- <div class="react-container" data-config="/examples/feature/bar/additional-column-tooltip.json"></div> -->
|
|
59
60
|
<!-- <div class="react-container" data-config="https://cdc.gov/poxvirus/mpox/modules/data-viz/mpx-trends_1.json"></div> -->
|
|
60
|
-
<!-- <div class="react-container" data-config="/examples/feature/area/area-chart-date-city-temperature.json"></div> -->
|
|
61
61
|
<!-- <div class="react-container" data-config="/examples/feature/area/area-chart-date-apple.json"></div> -->
|
|
62
62
|
<!-- <div class="react-container" data-config="/examples/feature/forest-plot/linear.json"></div> -->
|
|
63
63
|
<!-- <div class="react-container" data-config="/examples/feature/forest-plot/logarithmic.json"></div> -->
|
|
@@ -74,10 +74,10 @@
|
|
|
74
74
|
<!-- <div class="react-container" data-config="/examples/feature/area/area-chart-category.json"></div> -->
|
|
75
75
|
<!-- <div class="react-container" data-config="/examples/feature/scatterplot/scatterplot.json"></div> -->
|
|
76
76
|
<!-- <div class="react-container" data-config="/examples/feature/deviation/planet-deviation-config.json"></div> -->
|
|
77
|
-
<div class="react-container" data-config="/examples/feature/boxplot/boxplot.json"></div>
|
|
77
|
+
<!-- <div class="react-container" data-config="/examples/feature/boxplot/boxplot.json"></div> -->
|
|
78
78
|
<!-- <div class="react-container" data-config="/examples/feature/combo/planet-combo-example-config.json"></div> -->
|
|
79
79
|
<!-- <div class="react-container" data-config="/examples/feature/combo/right-issues.json"></div> -->
|
|
80
|
-
|
|
80
|
+
<div class="react-container" data-config="/examples/dev-9822.json"></div>
|
|
81
81
|
|
|
82
82
|
<!-- BAR -->
|
|
83
83
|
<!-- <div class="react-container" data-config="/examples/feature/bar/planet-example-config.json"></div> -->
|
|
@@ -105,7 +105,10 @@
|
|
|
105
105
|
<!-- <div class="react-container" data-config="/https://www.cdc.gov/poxvirus/mpox/modules/data-viz/mpx-age-sex1.json"></div> -->
|
|
106
106
|
|
|
107
107
|
<!-- TESTS DATE EXCLUSIONS -->
|
|
108
|
-
|
|
108
|
+
<div
|
|
109
|
+
class="react-container"
|
|
110
|
+
data-config="/examples/feature/tests-date-exclusions/date-exclusions-config.json"
|
|
111
|
+
></div>
|
|
109
112
|
<!-- <div class="react-container" data-config="/examples/feature/tests-case-rate/case-rate-example-config.json"></div> -->
|
|
110
113
|
|
|
111
114
|
<!-- TESTS BIG SMALL-->
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cdc/chart",
|
|
3
|
-
"version": "4.24.
|
|
3
|
+
"version": "4.24.12",
|
|
4
4
|
"description": "React component for visualizing tabular data in various types of charts",
|
|
5
5
|
"moduleName": "CdcChart",
|
|
6
6
|
"main": "dist/cdcchart",
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
"react": "^18.2.0",
|
|
62
62
|
"react-dom": "^18.2.0"
|
|
63
63
|
},
|
|
64
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "347414f1da4b0e9bf2f22a7b59335deccf0b2d9c",
|
|
65
65
|
"devDependencies": {
|
|
66
66
|
"@types/d3-sankey": "^0.12.4",
|
|
67
67
|
"resize-observer-polyfill": "^1.5.1"
|
package/src/CdcChart.tsx
CHANGED
|
@@ -436,89 +436,71 @@ const CdcChart = ({
|
|
|
436
436
|
|
|
437
437
|
if (newConfig.visualizationType === 'Box Plot' && newConfig.series) {
|
|
438
438
|
const combinedData = filteredData || data
|
|
439
|
-
|
|
440
|
-
const
|
|
441
|
-
|
|
442
|
-
let tableData: any[] = []
|
|
439
|
+
const groups = _.uniq(_.map(combinedData, newConfig.xAxis.dataKey))
|
|
440
|
+
const seriesKeys = _.map(newConfig.series, 'dataKey')
|
|
443
441
|
const plots: any[] = []
|
|
444
442
|
|
|
445
|
-
// group specific statistics
|
|
446
|
-
// prevent re-renders
|
|
447
|
-
if (!groups) return
|
|
448
443
|
groups.forEach(g => {
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
444
|
+
seriesKeys.forEach(seriesKey => {
|
|
445
|
+
try {
|
|
446
|
+
if (!g) throw new Error('No groups resolved in box plots')
|
|
447
|
+
|
|
448
|
+
// Start handle operations on combinedData
|
|
449
|
+
const { count, sortedData } = _.chain(combinedData)
|
|
450
|
+
// Filter by xAxis data key
|
|
451
|
+
.filter(item => item[newConfig.xAxis.dataKey] === g)
|
|
452
|
+
// perform multiple operations on the filtered data
|
|
453
|
+
.thru(filteredData => ({
|
|
454
|
+
count: filteredData.length,
|
|
455
|
+
sortedData: _.map(filteredData, item => Number(item[seriesKey])).sort()
|
|
456
|
+
}))
|
|
457
|
+
// get the results from the chain
|
|
458
|
+
.value()
|
|
459
|
+
|
|
460
|
+
// ! - Notice d3.quantile doesn't work here, and we had to take a custom route.
|
|
461
|
+
const quartiles = getQuartiles(sortedData)
|
|
462
|
+
|
|
463
|
+
if (!sortedData) throw new Error('boxplots dont have data yet')
|
|
464
|
+
if (!plots) throw new Error('boxplots dont have plots yet')
|
|
465
|
+
|
|
466
|
+
const q1 = quartiles.q1
|
|
467
|
+
const q3 = quartiles.q3
|
|
468
|
+
|
|
469
|
+
const iqr = q3 - q1
|
|
470
|
+
const lowerBounds = q1 - 1.5 * iqr
|
|
471
|
+
const upperBounds = q3 + 1.5 * iqr
|
|
472
|
+
const filteredData = sortedData.filter(d => d <= upperBounds)
|
|
473
|
+
const max = d3.max(filteredData)
|
|
474
|
+
plots.push({
|
|
475
|
+
columnCategory: g,
|
|
476
|
+
columnMax: max,
|
|
477
|
+
columnThirdQuartile: _.round(q3, newConfig.dataFormat.roundTo),
|
|
478
|
+
columnMedian: Number(d3.median(sortedData)).toFixed(newConfig.dataFormat.roundTo),
|
|
479
|
+
columnFirstQuartile: _.round(q1, newConfig.dataFormat.roundTo),
|
|
480
|
+
columnMin: _.min(sortedData),
|
|
481
|
+
columnCount: count,
|
|
482
|
+
columnSd: Number(d3.deviation(sortedData)).toFixed(newConfig.dataFormat.roundTo),
|
|
483
|
+
columnMean: Number(d3.mean(sortedData)).toFixed(newConfig.dataFormat.roundTo),
|
|
484
|
+
columnIqr: _.round(iqr, newConfig.dataFormat.roundTo),
|
|
485
|
+
values: sortedData,
|
|
486
|
+
columnLowerBounds: lowerBounds,
|
|
487
|
+
columnUpperBounds: upperBounds,
|
|
488
|
+
columnOutliers: _.filter(sortedData, value => value < lowerBounds || value > upperBounds),
|
|
489
|
+
columnNonOutliers: _.filter(sortedData, value => value >= lowerBounds && value <= upperBounds)
|
|
468
490
|
})
|
|
469
|
-
|
|
470
|
-
|
|
491
|
+
} catch (e) {
|
|
492
|
+
console.error('COVE: ', e.message) // eslint-disable-line
|
|
471
493
|
}
|
|
472
|
-
|
|
473
|
-
if (!filteredData) throw new Error('boxplots dont have data yet')
|
|
474
|
-
if (!plots) throw new Error('boxplots dont have plots yet')
|
|
475
|
-
|
|
476
|
-
const q1 = quartiles.q1
|
|
477
|
-
const q3 = quartiles.q3
|
|
478
|
-
const iqr = q3 - q1
|
|
479
|
-
const lowerBounds = q1 - (q3 - q1) * 1.5
|
|
480
|
-
const upperBounds = q3 + (q3 - q1) * 1.5
|
|
481
|
-
|
|
482
|
-
const outliers = sortedData.filter(v => v < lowerBounds || v > upperBounds)
|
|
483
|
-
|
|
484
|
-
const minValue: number = d3.min<number>(filteredDataValues) || 0
|
|
485
|
-
const _colMin = d3.max<number>([minValue, q1 - 1.5 * iqr])
|
|
486
|
-
plots.push({
|
|
487
|
-
columnCategory: g,
|
|
488
|
-
columnMax: d3.min([d3.max(filteredDataValues), q1 + 1.5 * iqr]),
|
|
489
|
-
columnThirdQuartile: Number(q3).toFixed(newConfig.dataFormat.roundTo),
|
|
490
|
-
columnMedian: Number(d3.median(filteredDataValues)).toFixed(newConfig.dataFormat.roundTo),
|
|
491
|
-
columnFirstQuartile: q1.toFixed(newConfig.dataFormat.roundTo),
|
|
492
|
-
columnMin: _colMin,
|
|
493
|
-
columnCount: filteredData.length,
|
|
494
|
-
columnSd: Number(d3.deviation(filteredDataValues)).toFixed(newConfig.dataFormat.roundTo),
|
|
495
|
-
columnMean: Number(d3.mean(filteredDataValues)).toFixed(newConfig.dataFormat.roundTo),
|
|
496
|
-
columnIqr: Number(iqr).toFixed(newConfig.dataFormat.roundTo),
|
|
497
|
-
columnLowerBounds: _colMin,
|
|
498
|
-
columnUpperBounds: d3.min([d3.max(sortedData), q1 + 1.5 * iqr]),
|
|
499
|
-
columnOutliers: outliers,
|
|
500
|
-
values: filteredDataValues,
|
|
501
|
-
keyValues: getValuesBySeriesKey()
|
|
502
|
-
})
|
|
503
|
-
} catch (e) {
|
|
504
|
-
console.error('COVE: ', e.message) // eslint-disable-line
|
|
505
|
-
}
|
|
506
|
-
})
|
|
507
|
-
|
|
508
|
-
// make deep copy so we can remove some fields for data
|
|
509
|
-
// this appears to be the easiest option instead of running logic against the datatable cell...
|
|
510
|
-
tableData = JSON.parse(JSON.stringify(plots))
|
|
511
|
-
tableData.map(table => {
|
|
512
|
-
table.columnIqr = undefined
|
|
513
|
-
table.nonOutlierValues = undefined
|
|
514
|
-
table.columnLowerBounds = undefined
|
|
515
|
-
table.columnUpperBounds = undefined
|
|
516
|
-
return null // resolve eslint
|
|
494
|
+
})
|
|
517
495
|
})
|
|
496
|
+
// Generate a flat list of categories based on seriesKeys and groups
|
|
497
|
+
const categories =
|
|
498
|
+
seriesKeys.length > 1
|
|
499
|
+
? _.flatMap(groups, value => _.map(seriesKeys, key => `${_.capitalize(key)} - ${_.capitalize(value)}`))
|
|
500
|
+
: groups
|
|
518
501
|
|
|
519
|
-
newConfig.boxplot['categories'] =
|
|
502
|
+
newConfig.boxplot['categories'] = categories
|
|
520
503
|
newConfig.boxplot.plots = plots
|
|
521
|
-
newConfig.boxplot.tableData = tableData
|
|
522
504
|
}
|
|
523
505
|
|
|
524
506
|
if (newConfig.visualizationType === 'Combo' && newConfig.series) {
|
|
@@ -602,10 +584,7 @@ const CdcChart = ({
|
|
|
602
584
|
: ''
|
|
603
585
|
|
|
604
586
|
// Sankey Description box error message
|
|
605
|
-
newConfig.runtime.editorErrorMessage =
|
|
606
|
-
newConfig.visualizationType === 'Sankey' && !newConfig.description
|
|
607
|
-
? 'SUBTEXT/CITATION field is empty: A description of the Sankey Diagram data must be inputted.'
|
|
608
|
-
: ''
|
|
587
|
+
newConfig.runtime.editorErrorMessage = ''
|
|
609
588
|
|
|
610
589
|
if (newConfig.legend.seriesHighlight?.length) {
|
|
611
590
|
setSeriesHighlight(newConfig.legend?.seriesHighlight)
|
|
@@ -636,11 +615,12 @@ const CdcChart = ({
|
|
|
636
615
|
const resizeObserver = new ResizeObserver(entries => {
|
|
637
616
|
for (let entry of entries) {
|
|
638
617
|
let { width, height } = entry.contentRect
|
|
639
|
-
|
|
618
|
+
const svgMarginWidth = 15
|
|
619
|
+
const editorWidth = 350
|
|
640
620
|
|
|
641
621
|
width = isEditor ? width - editorWidth : width
|
|
642
622
|
|
|
643
|
-
|
|
623
|
+
const newViewport = getViewport(width)
|
|
644
624
|
|
|
645
625
|
setCurrentViewport(newViewport)
|
|
646
626
|
|
|
@@ -648,7 +628,7 @@ const CdcChart = ({
|
|
|
648
628
|
width = width - 2.5
|
|
649
629
|
}
|
|
650
630
|
|
|
651
|
-
width = width
|
|
631
|
+
width = width - svgMarginWidth
|
|
652
632
|
|
|
653
633
|
setDimensions([width, height])
|
|
654
634
|
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Meta, Story } from '@storybook/react'
|
|
3
|
+
import Chart from './../CdcChart'
|
|
4
|
+
import exampleComboBarNonNumeric from './../../examples/feature/tests-date-exclusions/date-exclusions-config.json'
|
|
5
|
+
import { editConfigKeys } from '../helpers/configHelpers'
|
|
6
|
+
|
|
7
|
+
export default {
|
|
8
|
+
title: 'Components/Templates/Chart/Anchors',
|
|
9
|
+
component: Chart
|
|
10
|
+
} as Meta
|
|
11
|
+
|
|
12
|
+
type Story = StoryObj<typeof Chart>
|
|
13
|
+
|
|
14
|
+
export const Anchor_DateLinear: Story = {
|
|
15
|
+
args: {
|
|
16
|
+
config: exampleComboBarNonNumeric,
|
|
17
|
+
isEditor: false
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export const Anchor_Categorical: Story = {
|
|
22
|
+
args: {
|
|
23
|
+
config: editConfigKeys(exampleComboBarNonNumeric, [{ path: ['xAxis', 'type'], value: 'categorical' }])
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
export const Anchor_Date_Time: Story = {
|
|
28
|
+
args: {
|
|
29
|
+
config: editConfigKeys(exampleComboBarNonNumeric, [{ path: ['xAxis', 'type'], value: 'date-time' }])
|
|
30
|
+
}
|
|
31
|
+
}
|
|
@@ -17,11 +17,18 @@ export const Line: Story = {
|
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
-
export const
|
|
20
|
+
export const Bar_Vertical: Story = {
|
|
21
21
|
args: {
|
|
22
22
|
config: DynamicSeriesBarConfig,
|
|
23
23
|
isEditor: false
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
+
export const Bar_Horizontal: Story = {
|
|
28
|
+
args: {
|
|
29
|
+
config: { ...DynamicSeriesBarConfig, orientation: 'horizontal' },
|
|
30
|
+
isEditor: false
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
27
34
|
export default meta
|
|
@@ -9,6 +9,11 @@ import pairedBar from './_mock/paired-bar.json'
|
|
|
9
9
|
import horizontalBarConfig from './_mock/horizontal_bar.json'
|
|
10
10
|
import pieConfig from './_mock/pie_with_data.json'
|
|
11
11
|
import boxPlotConfig from './_mock/boxplot_multiseries.json'
|
|
12
|
+
import areaChartStacked from './_mock/area_chart_stacked.json'
|
|
13
|
+
import multipleLines from './_mock/short_dates.json'
|
|
14
|
+
import lineChartDynamicCI from './_mock/line_chart_dynamic_ci.json'
|
|
15
|
+
import lineChartNonDynamicCI from './_mock/line_chart_non_dynamic_ci.json'
|
|
16
|
+
import { editConfigKeys } from '../helpers/configHelpers'
|
|
12
17
|
|
|
13
18
|
const meta: Meta<typeof Chart> = {
|
|
14
19
|
title: 'Components/Templates/Chart',
|
|
@@ -17,6 +22,20 @@ const meta: Meta<typeof Chart> = {
|
|
|
17
22
|
|
|
18
23
|
type Story = StoryObj<typeof Chart>
|
|
19
24
|
|
|
25
|
+
export const line_Chart_Dynamic_Confidence_Intervals: Story = {
|
|
26
|
+
args: {
|
|
27
|
+
config: lineChartDynamicCI,
|
|
28
|
+
isEditor: false
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
export const line_Chart_Non_Dynamic_Confidence_Intervals: Story = {
|
|
33
|
+
args: {
|
|
34
|
+
config: lineChartNonDynamicCI,
|
|
35
|
+
isEditor: false
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
20
39
|
export const line_Chart_Two_Points_Regression_Test: Story = {
|
|
21
40
|
args: {
|
|
22
41
|
config: lineChartTwoPointsRegressionTest,
|
|
@@ -30,6 +49,12 @@ export const line_Chart_Two_Points_New_Chart: Story = {
|
|
|
30
49
|
}
|
|
31
50
|
}
|
|
32
51
|
|
|
52
|
+
export const multiple_lines: Story = {
|
|
53
|
+
args: {
|
|
54
|
+
config: editConfigKeys(multipleLines, [{ path: ['tooltips', 'dateDisplayFormat'], value: '%b. %d %Y' }])
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
33
58
|
export const Lollipop: Story = {
|
|
34
59
|
args: {
|
|
35
60
|
config: lollipop,
|
|
@@ -67,4 +92,11 @@ export const BoxPlot_Multiseries: Story = {
|
|
|
67
92
|
}
|
|
68
93
|
}
|
|
69
94
|
|
|
95
|
+
export const Area_Chart_stacked: Story = {
|
|
96
|
+
args: {
|
|
97
|
+
config: areaChartStacked,
|
|
98
|
+
isEditor: false
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
70
102
|
export default meta
|
|
@@ -13,7 +13,10 @@ type Story = StoryObj<typeof Chart>
|
|
|
13
13
|
|
|
14
14
|
export const Abbreviated_Dates: Story = {
|
|
15
15
|
args: {
|
|
16
|
-
config: editConfigKeys(SimplifiedLineConfig, [
|
|
16
|
+
config: editConfigKeys(SimplifiedLineConfig, [
|
|
17
|
+
{ path: ['xAxis', 'showYearsOnce'], value: true },
|
|
18
|
+
{ path: ['tooltips', 'dateDisplayFormat'], value: '%b. %d %Y' }
|
|
19
|
+
])
|
|
17
20
|
}
|
|
18
21
|
}
|
|
19
22
|
|
|
@@ -1,30 +1,40 @@
|
|
|
1
1
|
{
|
|
2
|
+
"annotations": [],
|
|
2
3
|
"type": "chart",
|
|
3
4
|
"debugSvg": false,
|
|
5
|
+
"chartMessage": {
|
|
6
|
+
"noData": "No Data Available"
|
|
7
|
+
},
|
|
4
8
|
"title": "Example Area Chart - City Temperature Data",
|
|
5
9
|
"showTitle": true,
|
|
6
10
|
"showDownloadMediaButton": false,
|
|
7
|
-
"showChartBrush": false,
|
|
8
11
|
"theme": "theme-blue",
|
|
9
12
|
"animate": false,
|
|
10
13
|
"fontSize": "medium",
|
|
11
14
|
"lineDatapointStyle": "hover",
|
|
15
|
+
"lineDatapointColor": "Same as Line",
|
|
12
16
|
"barHasBorder": "false",
|
|
13
17
|
"isLollipopChart": false,
|
|
14
18
|
"lollipopShape": "circle",
|
|
15
19
|
"lollipopColorStyle": "two-tone",
|
|
16
|
-
"visualizationSubType": "
|
|
20
|
+
"visualizationSubType": "stacked",
|
|
17
21
|
"barStyle": "",
|
|
18
22
|
"roundingStyle": "standard",
|
|
19
23
|
"tipRounding": "top",
|
|
20
24
|
"isResponsiveTicks": false,
|
|
21
25
|
"general": {
|
|
22
|
-
"
|
|
26
|
+
"annotationDropdownText": "Annotations",
|
|
27
|
+
"showDownloadButton": false,
|
|
28
|
+
"showMissingDataLabel": true,
|
|
29
|
+
"showSuppressedSymbol": true,
|
|
30
|
+
"showZeroValueData": true,
|
|
31
|
+
"hideNullValue": true
|
|
23
32
|
},
|
|
24
33
|
"padding": {
|
|
25
34
|
"left": 5,
|
|
26
35
|
"right": 5
|
|
27
36
|
},
|
|
37
|
+
"preliminaryData": [],
|
|
28
38
|
"yAxis": {
|
|
29
39
|
"hideAxis": false,
|
|
30
40
|
"displayNumbersOnBar": false,
|
|
@@ -47,23 +57,20 @@
|
|
|
47
57
|
"rightAxisTickColor": "#333",
|
|
48
58
|
"numTicks": "",
|
|
49
59
|
"axisPadding": 0,
|
|
60
|
+
"scalePadding": 10,
|
|
50
61
|
"tickRotation": 0,
|
|
51
62
|
"anchors": [],
|
|
63
|
+
"shoMissingDataLabel": true,
|
|
64
|
+
"showMissingDataLine": true,
|
|
65
|
+
"categories": [],
|
|
52
66
|
"isLegendValue": false,
|
|
53
67
|
"label": "Y Axis - Temperature"
|
|
54
68
|
},
|
|
55
69
|
"boxplot": {
|
|
56
70
|
"plots": [],
|
|
57
71
|
"borders": "true",
|
|
58
|
-
"firstQuartilePercentage": 25,
|
|
59
|
-
"thirdQuartilePercentage": 75,
|
|
60
|
-
"boxWidthPercentage": 40,
|
|
61
72
|
"plotOutlierValues": false,
|
|
62
73
|
"plotNonOutlierValues": true,
|
|
63
|
-
"legend": {
|
|
64
|
-
"showHowToReadText": false,
|
|
65
|
-
"howToReadText": ""
|
|
66
|
-
},
|
|
67
74
|
"labels": {
|
|
68
75
|
"q1": "Lower Quartile",
|
|
69
76
|
"q2": "q2",
|
|
@@ -80,6 +87,13 @@
|
|
|
80
87
|
"values": "Values",
|
|
81
88
|
"lowerBounds": "Lower Bounds",
|
|
82
89
|
"upperBounds": "Upper Bounds"
|
|
90
|
+
},
|
|
91
|
+
"firstQuartilePercentage": 25,
|
|
92
|
+
"thirdQuartilePercentage": 75,
|
|
93
|
+
"boxWidthPercentage": 40,
|
|
94
|
+
"legend": {
|
|
95
|
+
"showHowToReadText": false,
|
|
96
|
+
"howToReadText": ""
|
|
83
97
|
}
|
|
84
98
|
},
|
|
85
99
|
"topAxis": {
|
|
@@ -94,8 +108,9 @@
|
|
|
94
108
|
"horizontal": 750
|
|
95
109
|
},
|
|
96
110
|
"xAxis": {
|
|
111
|
+
"sortDates": false,
|
|
97
112
|
"anchors": [],
|
|
98
|
-
"type": "date",
|
|
113
|
+
"type": "date-time",
|
|
99
114
|
"showTargetLabel": true,
|
|
100
115
|
"targetLabel": "Target",
|
|
101
116
|
"hideAxis": false,
|
|
@@ -109,15 +124,20 @@
|
|
|
109
124
|
"tickLabelColor": "#333",
|
|
110
125
|
"tickColor": "#333",
|
|
111
126
|
"numTicks": "6",
|
|
112
|
-
"labelOffset":
|
|
127
|
+
"labelOffset": 0,
|
|
113
128
|
"axisPadding": 0,
|
|
114
129
|
"target": 0,
|
|
115
130
|
"maxTickRotation": 0,
|
|
131
|
+
"padding": "0",
|
|
132
|
+
"showYearsOnce": false,
|
|
133
|
+
"sortByRecentDate": false,
|
|
116
134
|
"isLegendValue": false,
|
|
117
135
|
"dataKey": "Date",
|
|
118
136
|
"label": "X Axis Example Label",
|
|
119
137
|
"dateParseFormat": "%Y-%m-%d",
|
|
120
|
-
"dateDisplayFormat": "%m/%d/%Y"
|
|
138
|
+
"dateDisplayFormat": "%m/%d/%Y",
|
|
139
|
+
"axisBBox": 95.58972930908203,
|
|
140
|
+
"tickWidthMax": 91
|
|
121
141
|
},
|
|
122
142
|
"table": {
|
|
123
143
|
"label": "Data Type by Date",
|
|
@@ -127,16 +147,22 @@
|
|
|
127
147
|
"caption": "",
|
|
128
148
|
"showDownloadUrl": true,
|
|
129
149
|
"showDataTableLink": true,
|
|
150
|
+
"showDownloadLinkBelow": true,
|
|
130
151
|
"indexLabel": "",
|
|
131
152
|
"download": true,
|
|
132
153
|
"showVertical": false,
|
|
154
|
+
"dateDisplayFormat": "",
|
|
155
|
+
"showMissingDataLabel": true,
|
|
156
|
+
"showSuppressedSymbol": true,
|
|
133
157
|
"show": true
|
|
134
158
|
},
|
|
135
159
|
"orientation": "vertical",
|
|
136
160
|
"color": "pinkpurple",
|
|
137
161
|
"columns": {},
|
|
138
162
|
"legend": {
|
|
163
|
+
"hide": false,
|
|
139
164
|
"behavior": "isolate",
|
|
165
|
+
"axisAlign": true,
|
|
140
166
|
"singleRow": false,
|
|
141
167
|
"colorCode": "",
|
|
142
168
|
"reverseLabelOrder": false,
|
|
@@ -146,8 +172,27 @@
|
|
|
146
172
|
"dynamicLegendItemLimit": 5,
|
|
147
173
|
"dynamicLegendItemLimitMessage": "Dynamic Legend Item Limit Hit.",
|
|
148
174
|
"dynamicLegendChartMessage": "Select Options from the Legend",
|
|
149
|
-
"
|
|
150
|
-
"
|
|
175
|
+
"label": "Type of Data",
|
|
176
|
+
"lineMode": false,
|
|
177
|
+
"verticalSorted": false,
|
|
178
|
+
"highlightOnHover": false,
|
|
179
|
+
"hideSuppressedLabels": false,
|
|
180
|
+
"hideSuppressionLink": false,
|
|
181
|
+
"seriesHighlight": [],
|
|
182
|
+
"style": "circles",
|
|
183
|
+
"subStyle": "linear blocks",
|
|
184
|
+
"tickRotation": "",
|
|
185
|
+
"hideBorder": {
|
|
186
|
+
"side": false,
|
|
187
|
+
"topBottom": true
|
|
188
|
+
},
|
|
189
|
+
"position": "right"
|
|
190
|
+
},
|
|
191
|
+
"brush": {
|
|
192
|
+
"height": 25,
|
|
193
|
+
"active": false,
|
|
194
|
+
"pattern_id": "brush_pattern",
|
|
195
|
+
"accent_color": "#ddd"
|
|
151
196
|
},
|
|
152
197
|
"exclusions": {
|
|
153
198
|
"active": true,
|
|
@@ -185,7 +230,8 @@
|
|
|
185
230
|
{
|
|
186
231
|
"dataKey": "Austin",
|
|
187
232
|
"type": "Area Chart",
|
|
188
|
-
"tooltip": true
|
|
233
|
+
"tooltip": true,
|
|
234
|
+
"axis": "Left"
|
|
189
235
|
},
|
|
190
236
|
{
|
|
191
237
|
"dataKey": "San Francisco",
|
|
@@ -195,22 +241,28 @@
|
|
|
195
241
|
}
|
|
196
242
|
],
|
|
197
243
|
"tooltips": {
|
|
198
|
-
"opacity": 90
|
|
244
|
+
"opacity": 90,
|
|
245
|
+
"singleSeries": false,
|
|
246
|
+
"dateDisplayFormat": ""
|
|
199
247
|
},
|
|
200
248
|
"forestPlot": {
|
|
201
249
|
"startAt": 0,
|
|
202
|
-
"width": "auto",
|
|
203
250
|
"colors": {
|
|
204
251
|
"line": "",
|
|
205
252
|
"shape": ""
|
|
206
253
|
},
|
|
254
|
+
"lineOfNoEffect": {
|
|
255
|
+
"show": true
|
|
256
|
+
},
|
|
257
|
+
"type": "",
|
|
258
|
+
"pooledResult": {
|
|
259
|
+
"diamondHeight": 5,
|
|
260
|
+
"column": ""
|
|
261
|
+
},
|
|
207
262
|
"estimateField": "",
|
|
208
263
|
"estimateRadius": "",
|
|
209
|
-
"lowerCiField": "",
|
|
210
|
-
"upperCiField": "",
|
|
211
264
|
"shape": "",
|
|
212
265
|
"rowHeight": 20,
|
|
213
|
-
"showZeroLine": false,
|
|
214
266
|
"description": {
|
|
215
267
|
"show": true,
|
|
216
268
|
"text": "description",
|
|
@@ -232,15 +284,60 @@
|
|
|
232
284
|
"estimateField": 0
|
|
233
285
|
},
|
|
234
286
|
"leftWidthOffset": 0,
|
|
235
|
-
"rightWidthOffset": 0
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
"
|
|
239
|
-
"
|
|
287
|
+
"rightWidthOffset": 0,
|
|
288
|
+
"showZeroLine": false,
|
|
289
|
+
"leftLabel": "",
|
|
290
|
+
"rightLabel": "",
|
|
291
|
+
"width": "auto",
|
|
292
|
+
"lowerCiField": "",
|
|
293
|
+
"upperCiField": ""
|
|
240
294
|
},
|
|
241
295
|
"area": {
|
|
242
296
|
"isStacked": true
|
|
243
297
|
},
|
|
298
|
+
"sankey": {
|
|
299
|
+
"title": {
|
|
300
|
+
"defaultColor": "black"
|
|
301
|
+
},
|
|
302
|
+
"iterations": 1,
|
|
303
|
+
"rxValue": 0.9,
|
|
304
|
+
"overallSize": {
|
|
305
|
+
"width": 900,
|
|
306
|
+
"height": 700
|
|
307
|
+
},
|
|
308
|
+
"margin": {
|
|
309
|
+
"margin_y": 25,
|
|
310
|
+
"margin_x": 0
|
|
311
|
+
},
|
|
312
|
+
"nodeSize": {
|
|
313
|
+
"nodeWidth": 26,
|
|
314
|
+
"nodeHeight": 40
|
|
315
|
+
},
|
|
316
|
+
"nodePadding": 55,
|
|
317
|
+
"nodeFontColor": "black",
|
|
318
|
+
"nodeColor": {
|
|
319
|
+
"default": "#ff8500",
|
|
320
|
+
"inactive": "#808080"
|
|
321
|
+
},
|
|
322
|
+
"linkColor": {
|
|
323
|
+
"default": "#ffc900",
|
|
324
|
+
"inactive": "#D3D3D3"
|
|
325
|
+
},
|
|
326
|
+
"opacity": {
|
|
327
|
+
"nodeOpacityDefault": 1,
|
|
328
|
+
"nodeOpacityInactive": 0.1,
|
|
329
|
+
"LinkOpacityDefault": 1,
|
|
330
|
+
"LinkOpacityInactive": 0.1
|
|
331
|
+
},
|
|
332
|
+
"storyNodeFontColor": "#006778",
|
|
333
|
+
"storyNodeText": [],
|
|
334
|
+
"nodeValueStyle": {
|
|
335
|
+
"textBefore": "(",
|
|
336
|
+
"textAfter": ")"
|
|
337
|
+
},
|
|
338
|
+
"data": []
|
|
339
|
+
},
|
|
340
|
+
"showChartBrush": false,
|
|
244
341
|
"dataDescription": {
|
|
245
342
|
"horizontal": false,
|
|
246
343
|
"series": false
|
|
@@ -4648,5 +4745,6 @@
|
|
|
4648
4745
|
"description": "This example shows a bar chart created in the visualization editor in WCMS",
|
|
4649
4746
|
"dataCutoff": "0",
|
|
4650
4747
|
"validated": 4.23,
|
|
4651
|
-
"dynamicMarginTop": 0
|
|
4748
|
+
"dynamicMarginTop": 0,
|
|
4749
|
+
"version": "4.24.10"
|
|
4652
4750
|
}
|