@cdc/chart 4.25.5-1 → 4.25.6
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/LICENSE +201 -0
- package/dist/cdcchart.js +32848 -27824
- package/index.html +130 -130
- package/package.json +2 -2
- package/src/CdcChartComponent.tsx +66 -26
- package/src/_stories/Chart.stories.tsx +99 -93
- package/src/_stories/ChartPrefixSuffix.stories.tsx +29 -32
- package/src/_stories/_mock/pie_calculated_area.json +417 -0
- package/src/components/BarChart/components/BarChart.Horizontal.tsx +4 -13
- package/src/components/BarChart/components/BarChart.StackedVertical.tsx +3 -14
- package/src/components/BarChart/components/BarChart.Vertical.tsx +2 -8
- package/src/components/Brush/BrushChart.tsx +73 -0
- package/src/components/Brush/BrushController..tsx +39 -0
- package/src/components/DeviationBar.jsx +0 -1
- package/src/components/EditorPanel/EditorPanel.tsx +232 -147
- package/src/components/EditorPanel/components/Panels/Panel.General.tsx +2 -2
- package/src/components/EditorPanel/components/Panels/Panel.Series.tsx +3 -2
- package/src/components/EditorPanel/components/Panels/Panel.Visual.tsx +2 -1
- package/src/components/EditorPanel/components/Panels/panelVisual.styles.css +8 -0
- package/src/components/EditorPanel/useEditorPermissions.ts +7 -4
- package/src/components/HoverLine/HoverLine.tsx +74 -0
- package/src/components/Legend/Legend.Suppression.tsx +47 -3
- package/src/components/Legend/helpers/index.ts +1 -1
- package/src/components/LineChart/index.tsx +3 -6
- package/src/components/LinearChart.tsx +161 -132
- package/src/components/PieChart/PieChart.tsx +58 -13
- package/src/data/initial-state.js +8 -5
- package/src/helpers/getNewRuntime.ts +35 -0
- package/src/helpers/getPiePercent.ts +22 -0
- package/src/helpers/getTransformedData.ts +22 -0
- package/src/helpers/tests/getNewRuntime.test.ts +82 -0
- package/src/helpers/tests/getPiePercent.test.ts +38 -0
- package/src/hooks/useRightAxis.ts +1 -1
- package/src/hooks/useScales.ts +8 -3
- package/src/hooks/useTooltip.tsx +24 -10
- package/src/store/chart.actions.ts +2 -6
- package/src/store/chart.reducer.ts +23 -23
- package/src/types/ChartConfig.ts +6 -3
- package/src/types/ChartContext.ts +0 -2
- package/src/components/ZoomBrush.tsx +0 -251
package/index.html
CHANGED
|
@@ -1,38 +1,39 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
|
7
|
+
<style>
|
|
8
|
+
body {
|
|
9
|
+
margin: 0;
|
|
10
|
+
border-top: none !important;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.cdc-map-outer-container {
|
|
14
|
+
min-height: 100vh;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
/* .react-container + .react-container {
|
|
17
18
|
margin-top: 3rem;
|
|
18
19
|
} */
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
</style>
|
|
21
|
+
<link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/5.0/css/app.min.css?_=71669" />
|
|
22
|
+
</head>
|
|
22
23
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
24
|
+
<body>
|
|
25
|
+
<!-- SANKEY EXAMPLE -->
|
|
26
|
+
<!-- <div class="container d-flex flex-wrap body-wrapper bg-white" style="width: 750px">
|
|
26
27
|
<main class="col-lg-9 order-lg-2" role="main" aria-label="Main Content Area">
|
|
27
28
|
<div class="row">
|
|
28
29
|
<div class="col-md-12"> -->
|
|
29
|
-
|
|
30
|
-
|
|
30
|
+
<!-- <div class="react-container" data-config="/examples/feature/sankey/sankey-example-data.json"></div> -->
|
|
31
|
+
<!-- </div>
|
|
31
32
|
</div>
|
|
32
33
|
</main>
|
|
33
34
|
</div> -->
|
|
34
35
|
|
|
35
|
-
|
|
36
|
+
<!--
|
|
36
37
|
EXAMPLES:
|
|
37
38
|
chart/examples/features: different chart types and tests
|
|
38
39
|
chart/examples/private: an ignored git folder used for addl. troubleshooting.
|
|
@@ -44,124 +45,123 @@
|
|
|
44
45
|
|
|
45
46
|
-->
|
|
46
47
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
48
|
+
<!-- GENERIC CHART TYPES -->
|
|
49
|
+
<!-- <div class="react-container" data-config="/examples/private/ari-other-conditions-1.json"></div> -->
|
|
50
|
+
<!-- <div class="react-container" data-config="/examples/private/Viral-Respiratory-Deaths-Age.json"></div> -->
|
|
51
|
+
<!-- <div class="react-container" data-config="/examples/cases-year.json"></div>-->
|
|
52
|
+
<!-- <div class="react-container" data-config="/examples/test.json"></div> -->
|
|
53
|
+
<!-- <div class="react-container" data-config="/examples/feature/line/line-chart.json"></div> -->
|
|
54
|
+
<!-- <div class="react-container" data-config="/examples/dev-8332.json"></div> -->
|
|
55
|
+
<!-- <div class="react-container" data-config="/examples/feature/annotations/index.json"></div> -->
|
|
56
|
+
<!-- <div class="react-container" data-config="/examples/feature/filters/url-filter.json"></div> -->
|
|
57
|
+
<!-- <div class="react-container" data-config="/examples/feature/bar/additional-column-tooltip.json"></div> -->
|
|
58
|
+
<!-- <div class="react-container" data-config="https://cdc.gov/poxvirus/mpox/modules/data-viz/mpx-trends_1.json"></div> -->
|
|
59
|
+
<!-- <div class="react-container" data-config="/examples/feature/area/area-chart-date-apple.json"></div> -->
|
|
60
|
+
<!-- <div class="react-container" data-config="/examples/feature/forest-plot/linear.json"></div> -->
|
|
61
|
+
<!-- <div class="react-container" data-config="/examples/feature/forest-plot/logarithmic.json"></div> -->
|
|
62
|
+
<!-- <div class="react-container" data-config="/examples/feature/forest-plot/forest-plot.json"></div> -->
|
|
63
|
+
<!-- <div class="react-container" data-config="/examples/feature/pie/planet-pie-example-config.json"></div> -->
|
|
64
|
+
<!-- <div class="react-container" data-config=https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Line_Chart_Viz.json></div> -->
|
|
65
|
+
<!-- <div class="react-container" data-config=/examples/feature/regions/index.json></div> -->
|
|
66
|
+
<!-- <div class="react-container" data-config=https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Line_Chart_Regions_Viz.json></div> -->
|
|
67
|
+
<!-- <div class="react-container" data-config=https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Line_Chart_Regions_Viz.json></div> -->
|
|
68
|
+
<!-- <div class="react-container" data-config="/examples/feature/forecasting/forecasting.json"></div> -->
|
|
69
|
+
<!-- <div class="react-container" data-config="/examples/feature/forecasting/combo-forecasting.json"></div> -->
|
|
70
|
+
<!-- <div class="react-container" data-config="/examples/feature/forecasting/effective_reproduction.json"></div> -->
|
|
71
|
+
<!-- <div class="react-container" data-config="/examples/feature/area/area-chart-date.json"></div> -->
|
|
72
|
+
<!-- <div class="react-container" data-config="/examples/feature/area/area-chart-category.json"></div> -->
|
|
73
|
+
<!-- <div class="react-container" data-config="/examples/scatterplot-image-download.json"></div> -->
|
|
74
|
+
<!-- <div class="react-container" data-config="/examples/feature/deviation/planet-deviation-config.json"></div> -->
|
|
75
|
+
<!-- <div class="react-container" data-config="/examples/private/test.json"></div> -->
|
|
76
|
+
<!-- <div class="react-container" data-config="/examples/feature/combo/planet-combo-example-config.json"></div> -->
|
|
77
|
+
<!-- <div class="react-container" data-config="/examples/feature/combo/right-issues.json"></div> -->
|
|
78
|
+
<!-- <div class="react-container" data-config="/examples/dev-9822.json"></div> -->
|
|
79
|
+
|
|
80
|
+
<!-- BAR -->
|
|
81
|
+
<!-- <div class="react-container" data-config="/examples/feature/bar/planet-example-config.json"></div> -->
|
|
82
|
+
<!-- <div class="react-container" data-config="/examples/feature/bar/planet-chart-horizontal-example-config.json"></div> -->
|
|
83
|
+
<!-- <div class="react-container" data-config="/examples/feature/bar/example-bar-chart.json"></div> -->
|
|
84
|
+
<!-- <div class="react-container" data-config="/examples/feature/bar/horizontal-chart-max-increase.json"></div> -->
|
|
85
|
+
<!-- <div class="react-container" data-config="/examples/feature/bar/horizontal-chart.json"></div> -->
|
|
86
|
+
<!-- <div class="react-container" data-config="/examples/feature/bar/horizontal-stacked-bar-chart.json"></div> -->
|
|
87
|
+
<!-- <div class="react-container" data-config="/examples/feature/bar/planet-chart-horizontal-example-config.json"></div> -->
|
|
88
|
+
|
|
89
|
+
<!-- TESTS DATA TABLE SORTING -->
|
|
90
|
+
<!-- Bar Chart with Confidence Intervals (bottom of page) -->
|
|
91
|
+
<!-- <div class="react-container" data-config="https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Example_Bar_CI.json"></div> -->
|
|
92
|
+
<!-- TPOXX Patient Data -->
|
|
93
|
+
<!-- <div class="react-container" data-config="https://www.cdc.gov/poxvirus/mpox/modules/data-viz/tpoxx_weekly_race_eth.json"></div> -->
|
|
94
|
+
<!-- <div class="react-container" data-config="https://www.cdc.gov/poxvirus/mpox/modules/data-viz/mpx-tpoxx-age-gender.json"></div> -->
|
|
95
|
+
<!-- Non-Variola Orthopoxvirus (NVO) Laboratory Testing by Demographics -->
|
|
96
|
+
<!-- <div class="react-container" data-config="https://wwwdev-cdc.msappproxy.net/poxvirus/mpox/modules/data-viz/lab-data.json"></div> -->
|
|
97
|
+
<!-- <div class="react-container" data-config="https://wwwdev-cdc.msappproxy.net/poxvirus/mpox/modules/data-viz/lab-data-age.json"></div> -->
|
|
98
|
+
<!-- PROBLEM WITH THEIR PAGE CONFIG or CONFLICT with -->
|
|
99
|
+
<!-- CORS ERROR pulling data on Covid Flu RSV page at https://wwwdev-cdc.msappproxy.net/respiratory-viruses/index.html-->
|
|
100
|
+
<!-- <div class="react-container" data-config="https://wwwdev-cdc.msappproxy.net/respiratory-viruses/modules/emergency-dept-visits_live.json"></div> -->
|
|
101
|
+
<!-- MPOX -->
|
|
102
|
+
<!-- <div class="react-container" data-config="https://www.cdc.gov/poxvirus/mpox/modules/data-viz/mpox-demographics-monthly.json"></div> -->
|
|
103
|
+
<!-- <div class="react-container" data-config="/https://www.cdc.gov/poxvirus/mpox/modules/data-viz/mpx-age-sex1.json"></div> -->
|
|
104
|
+
|
|
105
|
+
<!-- TESTS DATE EXCLUSIONS -->
|
|
106
|
+
<!-- <div class="react-container" data-config="/examples/feature/boxplot/boxplot.json"></div> -->
|
|
107
|
+
<!-- <div class="react-container" data-config="/examples/feature/tests-case-rate/case-rate-example-config.json"></div> -->
|
|
108
|
+
|
|
109
|
+
<!-- TESTS BIG SMALL-->
|
|
110
|
+
<!-- <div class="react-container" data-config="/examples/feature/tests-big-small/big-small-test-line.json"></div> -->
|
|
111
|
+
<!-- <div class="react-container" data-config="/examples/feature/tests-big-small/big-small-test-bar.json"></div> -->
|
|
112
|
+
<!-- <div class="react-container" data-config="/examples/feature/tests-big-small/big-small-test-negative.json"></div> -->
|
|
113
|
+
<!-- <div class="react-container" data-config="/examples/feature/tests-big-small/line-chart-max-increase.json"></div> -->
|
|
114
|
+
|
|
115
|
+
<!-- TESTS NONNUMERICS -->
|
|
116
|
+
<!-- <div
|
|
116
117
|
class="react-container"
|
|
117
118
|
data-config="/examples/feature/tests-non-numerics/planet-pie-example-config-nonnumeric.json"
|
|
118
119
|
></div> -->
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
<!-- <div class="react-container" data-config="/examples/sparkline.json"></div> -->
|
|
125
|
-
<!-- <div
|
|
120
|
+
<div class="react-container" data-config="/examples/feature/tests-non-numerics/example-combo-bar-nonnumeric.json">
|
|
121
|
+
</div>
|
|
122
|
+
<!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/example-bar-chart-nonnumeric.json"></div> -->
|
|
123
|
+
<!-- <div class="react-container" data-config="/examples/sparkline.json"></div> -->
|
|
124
|
+
<!-- <div
|
|
126
125
|
class="react-container"
|
|
127
126
|
data-config="/examples/feature/tests-non-numerics/sparkline-chart-nonnumeric.json"
|
|
128
127
|
></div> -->
|
|
129
|
-
|
|
130
|
-
|
|
128
|
+
<!-- <div class="react-container" data-config="/examples/region-issue.json"></div> -->
|
|
129
|
+
<!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/stacked-vertical-bar-example-nonnumerics.json"></div> -->
|
|
131
130
|
|
|
132
|
-
|
|
133
|
-
|
|
131
|
+
<!-- TESTS CUTOFF -->
|
|
132
|
+
<!-- <div class="react-container" data-config="/examples/feature/tests-cutoff/cutoff-example-config.json"></div> -->
|
|
134
133
|
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
134
|
+
<!-- TESTS COVID -->
|
|
135
|
+
<!-- <div class="react-container" data-config="/examples/feature/tests-covid/covid-confidence-example-config.json"></div> -->
|
|
136
|
+
<!-- <div class="react-container" data-config="/examples/feature/tests-covid/covid-example-config.json"></div> -->
|
|
138
137
|
|
|
139
|
-
|
|
138
|
+
<!--
|
|
140
139
|
GALLERY EXAMPLES BELOW THIS LINE...
|
|
141
140
|
https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/example-data-map-cities-states.html
|
|
142
141
|
|
|
143
142
|
-->
|
|
144
143
|
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
144
|
+
<!-- GENERIC CHART TYPES -->
|
|
145
|
+
<!-- <div class="react-container" data-config="/examples/gallery/paired-bar/paired-bar-chart.json"></div> -->
|
|
146
|
+
<!-- <div class="react-container" data-config="/examples/feature/line/line-chart.json"></div> -->
|
|
147
|
+
<!-- <div class="react-container" data-config="/examples/feature/annotations/index.json"></div> -->
|
|
148
|
+
|
|
149
|
+
<!-- HORIZONTAL BAR CHARTS -->
|
|
150
|
+
<!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-bar-chart-with-numbers-on-bar.json"></div> -->
|
|
151
|
+
<!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-bar-chart.json"></div> -->
|
|
152
|
+
<!-- <div class="react-container" data-config="/examples/gallery/bar-chart-horizontal/horizontal-stacked.json"></div> -->
|
|
153
|
+
|
|
154
|
+
<!-- VERTICAL BAR CHARTS -->
|
|
155
|
+
<!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/combo-line-chart.json"></div> -->
|
|
156
|
+
<!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-categorical.json"></div> -->
|
|
157
|
+
<!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-stacked.json"></div> -->
|
|
158
|
+
<!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-confidence.json"></div> -->
|
|
159
|
+
<!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart.json"></div> -->
|
|
160
|
+
<!-- <div class="react-container" data-config="https://www.cdc.gov/respiratory-viruses/modules/respiratory-virus-activity/emergency-dept-visits_live.json"></div> -->
|
|
161
|
+
|
|
162
|
+
<noscript>You need to enable JavaScript to run this app.</noscript>
|
|
163
|
+
|
|
164
|
+
<script type="module" src="./src/index.jsx"></script>
|
|
165
|
+
</body>
|
|
166
|
+
|
|
167
|
+
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cdc/chart",
|
|
3
|
-
"version": "4.25.
|
|
3
|
+
"version": "4.25.6",
|
|
4
4
|
"description": "React component for visualizing tabular data in various types of charts",
|
|
5
5
|
"moduleName": "CdcChart",
|
|
6
6
|
"main": "dist/cdcchart",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"react": "^18.2.0",
|
|
54
54
|
"react-dom": "^18.2.0"
|
|
55
55
|
},
|
|
56
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "6097de1ff814001880d9ac64bd66becdc092d63c",
|
|
57
57
|
"devDependencies": {
|
|
58
58
|
"@types/d3-array": "^3.2.1",
|
|
59
59
|
"@types/d3-format": "^3.0.4",
|
|
@@ -71,9 +71,16 @@ import { getBoxPlotConfig } from './helpers/getBoxPlotConfig'
|
|
|
71
71
|
import { getComboChartConfig } from './helpers/getComboChartConfig'
|
|
72
72
|
import { getExcludedData } from './helpers/getExcludedData'
|
|
73
73
|
import { getColorScale } from './helpers/getColorScale'
|
|
74
|
+
import { getTransformedData } from './helpers/getTransformedData'
|
|
75
|
+
import { getPiePercent } from './helpers/getPiePercent'
|
|
76
|
+
|
|
74
77
|
// styles
|
|
75
78
|
import './scss/main.scss'
|
|
76
79
|
import { getInitialState, reducer } from './store/chart.reducer'
|
|
80
|
+
import { VizFilter } from '@cdc/core/types/VizFilter'
|
|
81
|
+
import { getNewRuntime } from './helpers/getNewRuntime'
|
|
82
|
+
import FootnotesStandAlone from '@cdc/core/components/Footnotes/FootnotesStandAlone'
|
|
83
|
+
import { Datasets } from '@cdc/core/types/DataSet'
|
|
77
84
|
|
|
78
85
|
interface CdcChartProps {
|
|
79
86
|
config?: ChartConfig
|
|
@@ -87,6 +94,7 @@ interface CdcChartProps {
|
|
|
87
94
|
setSharedFilter?: (filter: any) => void
|
|
88
95
|
setSharedFilterValue?: (value: any) => void
|
|
89
96
|
dashboardConfig?: DashboardConfig
|
|
97
|
+
datasets?: Datasets
|
|
90
98
|
}
|
|
91
99
|
const CdcChart: React.FC<CdcChartProps> = ({
|
|
92
100
|
config: configObj,
|
|
@@ -98,7 +106,8 @@ const CdcChart: React.FC<CdcChartProps> = ({
|
|
|
98
106
|
link,
|
|
99
107
|
setSharedFilter,
|
|
100
108
|
setSharedFilterValue,
|
|
101
|
-
dashboardConfig
|
|
109
|
+
dashboardConfig,
|
|
110
|
+
datasets
|
|
102
111
|
}) => {
|
|
103
112
|
const transform = new DataTransform()
|
|
104
113
|
const initialState = getInitialState(configObj)
|
|
@@ -130,10 +139,6 @@ const CdcChart: React.FC<CdcChartProps> = ({
|
|
|
130
139
|
}
|
|
131
140
|
}
|
|
132
141
|
|
|
133
|
-
const setFiltersData = (filteredData: object[]): void => {
|
|
134
|
-
dispatch({ type: 'SET_FILTERED_DATA', payload: filteredData })
|
|
135
|
-
}
|
|
136
|
-
|
|
137
142
|
const legendRef = useRef(null)
|
|
138
143
|
const parentRef = useRef(null)
|
|
139
144
|
|
|
@@ -160,7 +165,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
|
|
|
160
165
|
|
|
161
166
|
const convertLineToBarGraph = isConvertLineToBarGraph(config, filteredData)
|
|
162
167
|
|
|
163
|
-
const prepareConfig =
|
|
168
|
+
const prepareConfig = (loadedConfig: ChartConfig) => {
|
|
164
169
|
let newConfig = _.defaultsDeep(loadedConfig, defaults)
|
|
165
170
|
_.defaultsDeep(newConfig, {
|
|
166
171
|
table: { showVertical: false }
|
|
@@ -340,6 +345,30 @@ const CdcChart: React.FC<CdcChartProps> = ({
|
|
|
340
345
|
}
|
|
341
346
|
}
|
|
342
347
|
|
|
348
|
+
const setFilters = (newFilters: VizFilter[]) => {
|
|
349
|
+
if (!config.dynamicSeries) {
|
|
350
|
+
const _newFilters = addValuesToFilters(newFilters, excludedData)
|
|
351
|
+
setConfig({
|
|
352
|
+
...config,
|
|
353
|
+
filters: _newFilters
|
|
354
|
+
})
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
if (config.filterBehavior === 'Filter Change' || config.filterBehavior === 'Apply Button') {
|
|
358
|
+
const newFilteredData = filterVizData(newFilters, excludedData)
|
|
359
|
+
|
|
360
|
+
dispatch({ type: 'SET_FILTERED_DATA', payload: newFilteredData })
|
|
361
|
+
if (config.dynamicSeries) {
|
|
362
|
+
const runtime = getNewRuntime(config, newFilteredData)
|
|
363
|
+
setConfig({
|
|
364
|
+
...config,
|
|
365
|
+
filters: newFilters,
|
|
366
|
+
runtime
|
|
367
|
+
})
|
|
368
|
+
}
|
|
369
|
+
}
|
|
370
|
+
}
|
|
371
|
+
|
|
343
372
|
// Observes changes to outermost container and changes viewport size in state
|
|
344
373
|
const resizeObserver = new ResizeObserver(entries => {
|
|
345
374
|
for (let entry of entries) {
|
|
@@ -378,7 +407,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
|
|
|
378
407
|
if (newConfig.dataUrl && !urlFilters) {
|
|
379
408
|
// handle urls with spaces in the name.
|
|
380
409
|
if (newConfig.dataUrl) newConfig.dataUrl = `${newConfig.dataUrl}`
|
|
381
|
-
let newData = await fetchRemoteData(newConfig.dataUrl
|
|
410
|
+
let newData = await fetchRemoteData(newConfig.dataUrl)
|
|
382
411
|
|
|
383
412
|
if (newData && newConfig.dataDescription) {
|
|
384
413
|
newData = transform.autoStandardize(newData)
|
|
@@ -399,12 +428,18 @@ const CdcChart: React.FC<CdcChartProps> = ({
|
|
|
399
428
|
}
|
|
400
429
|
return newConfig
|
|
401
430
|
}
|
|
431
|
+
|
|
402
432
|
useEffect(() => {
|
|
403
433
|
const load = async () => {
|
|
404
434
|
try {
|
|
405
435
|
if (configObj) {
|
|
406
436
|
const preparedConfig = await prepareConfig(configObj)
|
|
407
437
|
const preppedData = await prepareData(preparedConfig)
|
|
438
|
+
|
|
439
|
+
if (preparedConfig?.formattedData?.length) {
|
|
440
|
+
preppedData.data = preparedConfig.formattedData
|
|
441
|
+
}
|
|
442
|
+
|
|
408
443
|
dispatch({ type: 'SET_STATE_DATA', payload: preppedData.data })
|
|
409
444
|
dispatch({ type: 'SET_EXCLUDED_DATA', payload: preppedData.data })
|
|
410
445
|
updateConfig(preparedConfig, preppedData.data)
|
|
@@ -491,7 +526,11 @@ const CdcChart: React.FC<CdcChartProps> = ({
|
|
|
491
526
|
|
|
492
527
|
// Called on legend click, highlights/unhighlights the data series with the given label
|
|
493
528
|
const highlight = (label: Label): void => {
|
|
494
|
-
if (
|
|
529
|
+
if (
|
|
530
|
+
seriesHighlight.length + 1 === config.runtime.seriesKeys.length &&
|
|
531
|
+
config.visualizationType !== 'Forecasting' &&
|
|
532
|
+
!seriesHighlight.includes(label.datum)
|
|
533
|
+
) {
|
|
495
534
|
return handleShowAll()
|
|
496
535
|
}
|
|
497
536
|
|
|
@@ -589,8 +628,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
|
|
|
589
628
|
rightSuffix,
|
|
590
629
|
bottomPrefix,
|
|
591
630
|
bottomSuffix,
|
|
592
|
-
bottomAbbreviated
|
|
593
|
-
onlyShowTopPrefixSuffix
|
|
631
|
+
bottomAbbreviated
|
|
594
632
|
}
|
|
595
633
|
} = config
|
|
596
634
|
|
|
@@ -683,9 +721,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
|
|
|
683
721
|
if (addColPrefix && axis === 'left') {
|
|
684
722
|
result = addColPrefix + result
|
|
685
723
|
} else {
|
|
686
|
-
|
|
687
|
-
const suppressAllButLast = onlyShowTopPrefixSuffix && length - 1 !== index
|
|
688
|
-
if (prefix && axis === 'left' && !suppressAllButLast) {
|
|
724
|
+
if (prefix && axis === 'left') {
|
|
689
725
|
result += prefix
|
|
690
726
|
}
|
|
691
727
|
}
|
|
@@ -704,7 +740,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
|
|
|
704
740
|
if (addColSuffix && axis === 'left') {
|
|
705
741
|
result += addColSuffix
|
|
706
742
|
} else {
|
|
707
|
-
if (suffix && axis === 'left'
|
|
743
|
+
if (suffix && axis === 'left') {
|
|
708
744
|
result += suffix
|
|
709
745
|
}
|
|
710
746
|
}
|
|
@@ -759,6 +795,10 @@ const CdcChart: React.FC<CdcChartProps> = ({
|
|
|
759
795
|
const getTableRuntimeData = () => {
|
|
760
796
|
if (visualizationType === 'Sankey') return config?.data?.[0]?.tableData
|
|
761
797
|
const data = filteredData || excludedData
|
|
798
|
+
if (config.visualizationType === 'Pie' && !config.dataFormat?.showPiePercent) {
|
|
799
|
+
return getPiePercent(data, config?.yAxis?.dataKey)
|
|
800
|
+
}
|
|
801
|
+
|
|
762
802
|
const dynamicSeries = config.series.find(series => !!series.dynamicCategory)
|
|
763
803
|
if (!dynamicSeries) return data
|
|
764
804
|
const usedColumns = Object.values(config.columns)
|
|
@@ -825,7 +865,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
|
|
|
825
865
|
|
|
826
866
|
body = (
|
|
827
867
|
<>
|
|
828
|
-
{isEditor && <EditorPanel />}
|
|
868
|
+
{isEditor && <EditorPanel datasets={datasets} />}
|
|
829
869
|
<Layout.Responsive isEditor={isEditor}>
|
|
830
870
|
{config.newViz && <Confirm updateConfig={updateConfig} config={config} />}
|
|
831
871
|
{undefined === config.newViz && isEditor && config.runtime && config.runtime?.editorErrorMessage && (
|
|
@@ -859,11 +899,8 @@ const CdcChart: React.FC<CdcChartProps> = ({
|
|
|
859
899
|
{config.filters && !externalFilters && config.visualizationType !== 'Spark Line' && (
|
|
860
900
|
<Filters
|
|
861
901
|
config={config}
|
|
862
|
-
|
|
863
|
-
setFilteredData={setFiltersData}
|
|
864
|
-
filteredData={filteredData}
|
|
902
|
+
setFilters={setFilters}
|
|
865
903
|
excludedData={excludedData}
|
|
866
|
-
filterData={filterVizData}
|
|
867
904
|
dimensions={dimensions}
|
|
868
905
|
/>
|
|
869
906
|
)}
|
|
@@ -940,11 +977,8 @@ const CdcChart: React.FC<CdcChartProps> = ({
|
|
|
940
977
|
<>
|
|
941
978
|
<Filters
|
|
942
979
|
config={config}
|
|
943
|
-
|
|
944
|
-
setFilteredData={setFiltersData}
|
|
945
|
-
filteredData={filteredData}
|
|
980
|
+
setFilters={setFilters}
|
|
946
981
|
excludedData={excludedData}
|
|
947
|
-
filterData={filterVizData}
|
|
948
982
|
dimensions={dimensions}
|
|
949
983
|
/>
|
|
950
984
|
{config?.introText && (
|
|
@@ -1015,7 +1049,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
|
|
|
1015
1049
|
(config.visualizationType === 'Sankey' && config.table.show)) && (
|
|
1016
1050
|
<DataTable
|
|
1017
1051
|
/* changing the "key" will force the table to re-render
|
|
1018
|
-
|
|
1052
|
+
when the default sort changes while editing */
|
|
1019
1053
|
key={dataTableDefaultSortBy}
|
|
1020
1054
|
config={pivotDynamicSeries(config)}
|
|
1021
1055
|
rawData={
|
|
@@ -1041,8 +1075,14 @@ const CdcChart: React.FC<CdcChartProps> = ({
|
|
|
1041
1075
|
)}
|
|
1042
1076
|
{config?.annotations?.length > 0 && <Annotation.Dropdown />}
|
|
1043
1077
|
{/* show pdf or image button */}
|
|
1044
|
-
{config?.
|
|
1078
|
+
{config?.legacyFootnotes && (
|
|
1079
|
+
<section className='footnotes pt-2 mt-4'>{parse(config.legacyFootnotes)}</section>
|
|
1080
|
+
)}
|
|
1045
1081
|
</div>
|
|
1082
|
+
<FootnotesStandAlone
|
|
1083
|
+
config={configObj.footnotes}
|
|
1084
|
+
filters={config.filters?.filter(f => f.filterFootnotes)}
|
|
1085
|
+
/>
|
|
1046
1086
|
</div>
|
|
1047
1087
|
)}
|
|
1048
1088
|
</Layout.Responsive>
|
|
@@ -1100,7 +1140,7 @@ const CdcChart: React.FC<CdcChartProps> = ({
|
|
|
1100
1140
|
setSharedFilterValue,
|
|
1101
1141
|
svgRef,
|
|
1102
1142
|
tableData: filteredData || excludedData,
|
|
1103
|
-
transformedData:
|
|
1143
|
+
transformedData: getTransformedData({ brushData: state.brushData, filteredData, excludedData, clean }),
|
|
1104
1144
|
twoColorPalette,
|
|
1105
1145
|
unfilteredData: _.cloneDeep(stateData),
|
|
1106
1146
|
updateConfig
|