feat(v6): use d3 v6 build with webpack 5

.gitignore

@@ -40,7 +40,7 @@ node_modules
 demos/build
 
 # Builds
-sandbox/build
+sandbox/build/
 dist
 docs
 *.tgz

demos/css/britecharts.css

@@ -24,7 +24,7 @@
 .vertical-grid-line,
 .horizontal-grid-line {
   fill: none;
-  shape-rendering: crispEdges;
+  shape-rendering: crispedges;
   stroke: #eff2f5;
   stroke-dasharray: 4, 4;
   stroke-width: 1; }
@@ -36,13 +36,13 @@
 .extended-y-line,
 .extended-x-line {
   fill: none;
-  shape-rendering: crispEdges;
+  shape-rendering: crispedges;
   stroke: #adb0b6;
   stroke-width: 1; }
 
 .tick line {
   fill: none;
-  shape-rendering: crispEdges;
+  shape-rendering: crispedges;
   stroke: #adb0b6;
   stroke-width: 1; }
 
@@ -96,7 +96,7 @@
   transition: opacity 0.2s ease-out; }
 
 .bar-chart .bar {
-  shape-rendering: crispEdges; }
+  shape-rendering: crispedges; }
 
 .bar-chart .y-axis-group text {
   font-size: 14px; }
@@ -127,7 +127,7 @@
   display: none; }
 
 .line-chart .custom-line {
-  shape-rendering: crispEdges;
+  shape-rendering: crispedges;
   stroke-width: 1; }
 
 .line-chart .custom-line-annotation {
@@ -173,7 +173,7 @@
 
 .stacked-area .area-outline {
   fill: none;
-  shape-rendering: geometricPrecision;
+  shape-rendering: geometricprecision;
   stroke-width: 1.2; }
 
 .stacked-area .data-point-highlighter {
@@ -205,7 +205,7 @@
 
 .step-chart .step {
   fill: #8fdad8;
-  shape-rendering: crispEdges;
+  shape-rendering: crispedges;
   stroke-width: 0; }
   .step-chart .step:hover {
     fill: #39c2c9; }
@@ -235,7 +235,7 @@
   display: none; }
 
 .bullet-chart .marker-line {
-  shape-rendering: crispEdges; }
+  shape-rendering: crispedges; }
 
 .bullet-chart .axis-group path {
   display: none; }

demos/src/demo-bar.js

@@ -67,7 +67,7 @@ function createHorizontalBarChart() {
         barContainer.datum(dataset).call(barChart);
 
         tooltipContainer = select(
-            '.js-horizontal-bar-chart-container .bar-chart .metadata-group'
+            '.js-horizontal-bar-chart-container .bar-chart .metadata-group',
         );
         tooltipContainer.datum([]).call(tooltip);
     }

demos/src/demo-brush.js

@@ -1,4 +1,4 @@
-import { select, event } from 'd3-selection';
+import { select } from 'd3-selection';
 import { timeFormat } from 'd3-time-format';
 // import PubSub from 'pubsub-js';
 
@@ -133,7 +133,7 @@ if (select('.js-brush-chart-container').node()) {
             ? brushContainer.node().getBoundingClientRect().width
             : false;
         const missingDataBrushContainer = select(
-            '.js-other-brush-chart-container'
+            '.js-other-brush-chart-container',
         );
         const missingDataContainerWidth = missingDataBrushContainer.node()
             ? missingDataBrushContainer.node().getBoundingClientRect().width
@@ -152,11 +152,11 @@ if (select('.js-brush-chart-container').node()) {
     // Redraw charts on window resize
     // PubSub.subscribe('resize', redrawCharts);
 
-    select('#clear-selection').on('click', function (e) {
+    select('#clear-selection').on('click', function (event) {
         brushChart.dateRange([null, null]);
         event.preventDefault();
     });
-    select('#other-clear-selection').on('click', function (e) {
+    select('#other-clear-selection').on('click', function (event) {
         missingDataBrushChart.dateRange([null, null]);
         event.preventDefault();
     });

demos/src/demo-bullet.js

@@ -54,6 +54,6 @@ if (select('.js-bullet-chart-container').node()) {
         '.bullet-chart',
         function (newSchema) {
             createBulletChart(newSchema);
-        }
+        },
     );
 }

demos/src/demo-color.js

@@ -7,7 +7,7 @@ function createColors() {
 
     Object.keys(colorSchemas).forEach((colorPalette) => {
         const paletteDiv = document.getElementById(
-            `js-palette-${colorPalette}`
+            `js-palette-${colorPalette}`,
         );
 
         paletteDiv.style.display = 'flex';
@@ -28,14 +28,13 @@ function createGradients() {
 
     Object.keys(colorGradients).forEach((colorGradient) => {
         const gradientDiv = document.getElementById(
-            `js-gradient-${colorGradient}`
+            `js-gradient-${colorGradient}`,
         );
 
         gradientDiv.style.display = 'flex';
 
-        let [gradientStartColor, gradientEndColor] = colorGradients[
-            colorGradient
-        ];
+        let [gradientStartColor, gradientEndColor] =
+            colorGradients[colorGradient];
         const div = document.createElement('div');
 
         div.style.width = '900px';
@@ -49,7 +48,7 @@ function createGradients() {
 function createSingleColors() {
     const { singleColors } = colors;
     const colorsDiv = document.getElementsByClassName(
-        'js-single-color-container'
+        'js-single-color-container',
     )[0];
 
     colorsDiv.style.display = 'flex';

demos/src/demo-donut.js

@@ -113,7 +113,7 @@ function getVerticalLegendChart(dataset, optionalColorSchema) {
 
     if (containerWidth) {
         select(
-            '.js-vertical-legend-no-quantity-container .britechart-legend'
+            '.js-vertical-legend-no-quantity-container .britechart-legend',
         ).remove();
 
         legendChart.width(containerWidth).height(100);
@@ -159,7 +159,7 @@ function createDonutWithHighlightSliceChart() {
                 delete item.quantity;
 
                 return item;
-            }
+            },
         ),
         legendChart = getVerticalLegendChart(dataNoQuantity),
         donutChart = donut(),
@@ -232,6 +232,6 @@ if (select('.js-donut-chart-container').node()) {
     colorSelectorHelper.createColorSelector(
         '.js-color-selector-container',
         '.donut-chart',
-        createDonutChart
+        createDonutChart,
     );
 }

demos/src/demo-grouped-bar.js

@@ -62,14 +62,14 @@ function creategroupedBarChartWithTooltip(optionalColorSchema) {
         // Note that if the viewport width is less than the tooltipThreshold value,
         // this container won't exist, and the tooltip won't show up
         tooltipContainer = select(
-            '.js-grouped-bar-chart-tooltip-container .metadata-group'
+            '.js-grouped-bar-chart-tooltip-container .metadata-group',
         );
         tooltipContainer.datum([]).call(chartTooltip);
 
         select('#button').on('click', function () {
             groupedBar.exportChart(
                 'grouped-bar.png',
-                'Britecharts Grouped Bar'
+                'Britecharts Grouped Bar',
             );
         });
     }
@@ -157,7 +157,7 @@ function createHorizontalgroupedBarChart(optionalColorSchema) {
         // Note that if the viewport width is less than the tooltipThreshold value,
         // this container won't exist, and the tooltip won't show up
         tooltipContainer = select(
-            '.js-grouped-bar-chart-fixed-container .metadata-group'
+            '.js-grouped-bar-chart-fixed-container .metadata-group',
         );
         tooltipContainer.datum([]).call(chartTooltip);
     }
@@ -207,6 +207,6 @@ if (select('.js-grouped-bar-chart-tooltip-container').node()) {
     colorSelectorHelper.createColorSelector(
         '.js-color-selector-container',
         '.grouped-bar',
-        creategroupedBarChartWithTooltip
+        creategroupedBarChartWithTooltip,
     );
 }

demos/src/demo-heatmap.js

@@ -42,7 +42,7 @@ function createWeeklyHeatmapChart(optionalColorSchema) {
         heatmapContainer.datum(dataset).call(heatmapChart);
 
         tooltipContainer = select(
-            '.js-heatmap-chart-container .heatmap .metadata-group'
+            '.js-heatmap-chart-container .heatmap .metadata-group',
         );
         tooltipContainer.datum([]).call(tooltip);
     }
@@ -66,6 +66,6 @@ if (select('.js-heatmap-chart-container').node()) {
         '.heatmap',
         function (newSchema) {
             createWeeklyHeatmapChart(newSchema);
-        }
+        },
     );
 }

demos/src/demo-legend.js

@@ -143,6 +143,6 @@ if (select('.js-legend-chart-container').node()) {
     colorSelectorHelper.createColorSelector(
         '.js-color-selector-container',
         '.donut-chart',
-        createDonutChart
+        createDonutChart,
     );
 }

demos/src/demo-line.js

@@ -45,7 +45,7 @@ function createBrushChart(optionalColorSchema) {
                 if (brushRangeStart && brushRangeEnd) {
                     const filteredDataByBrushRange = filterData(
                         brushRangeStart,
-                        brushRangeEnd
+                        brushRangeEnd,
                     );
                     createLineChart(colorSchema, filteredDataByBrushRange);
                 } else {
@@ -109,7 +109,7 @@ function createLineChart(optionalColorSchema, optionalData) {
         // Note that if the viewport width is less than the tooltipThreshold value,
         // this container won't exist, and the tooltip won't show up
         tooltipContainer = select(
-            '.js-line-chart-container .metadata-group .hover-marker'
+            '.js-line-chart-container .metadata-group .hover-marker',
         );
         tooltipContainer.datum([]).call(chartTooltip);
     }
@@ -136,17 +136,16 @@ function createLineChartWithSingleLine() {
             .grid('vertical')
             .width(containerWidth)
             .on('customMouseOver', chartTooltip.show)
-            .on('customMouseMove', function (
-                dataPoint,
-                topicColorMap,
-                dataPointXPosition
-            ) {
-                chartTooltip.update(
-                    dataPoint,
-                    topicColorMap,
-                    dataPointXPosition
-                );
-            })
+            .on(
+                'customMouseMove',
+                function (dataPoint, topicColorMap, dataPointXPosition) {
+                    chartTooltip.update(
+                        dataPoint,
+                        topicColorMap,
+                        dataPointXPosition,
+                    );
+                },
+            )
             .on('customMouseOut', chartTooltip.hide);
 
         container.datum(dataset).call(lineChart2);
@@ -157,7 +156,7 @@ function createLineChartWithSingleLine() {
         // Note that if the viewport width is less than the tooltipThreshold value,
         // this container won't exist, and the tooltip won't show up
         tooltipContainer = select(
-            '.js-single-line-chart-container .metadata-group .vertical-marker-container'
+            '.js-single-line-chart-container .metadata-group .vertical-marker-container',
         );
         tooltipContainer.datum([]).call(chartTooltip);
 
@@ -188,17 +187,16 @@ function createLineChartWithFixedHeight() {
             .on('customMouseOver', function () {
                 chartTooltip.show();
             })
-            .on('customMouseMove', function (
-                dataPoint,
-                topicColorMap,
-                dataPointXPosition
-            ) {
-                chartTooltip.update(
-                    dataPoint,
-                    topicColorMap,
-                    dataPointXPosition
-                );
-            })
+            .on(
+                'customMouseMove',
+                function (dataPoint, topicColorMap, dataPointXPosition) {
+                    chartTooltip.update(
+                        dataPoint,
+                        topicColorMap,
+                        dataPointXPosition,
+                    );
+                },
+            )
             .on('customMouseOut', function () {
                 chartTooltip.hide();
             });
@@ -211,7 +209,7 @@ function createLineChartWithFixedHeight() {
         // Note that if the viewport width is less than the tooltipThreshold value,
         // this container won't exist, and the tooltip won't show up
         tooltipContainer = select(
-            '.js-fixed-line-chart-container .metadata-group .hover-marker'
+            '.js-fixed-line-chart-container .metadata-group .hover-marker',
         );
         tooltipContainer.datum([]).call(chartTooltip);
     }
@@ -305,6 +303,6 @@ if (select('.js-line-chart-container').node()) {
             createLineChart(newSchema);
             selectAll('.brush-chart').remove();
             createBrushChart(newSchema);
-        }
+        },
     );
 }

demos/src/demo-scatter-plot.js

@@ -16,7 +16,7 @@ function createScatterPlotWithSingleSource(optionalColorSchema) {
     let scatterChart = scatterPlot();
     let tooltip = miniTooltip().title('Temperature (C)');
     let scatterPlotContainer = select(
-        '.js-scatter-plot-chart-tooltip-container'
+        '.js-scatter-plot-chart-tooltip-container',
     );
     let containerWidth = scatterPlotContainer.node()
         ? scatterPlotContainer.node().getBoundingClientRect().width
@@ -56,7 +56,7 @@ function createScatterPlotWithSingleSource(optionalColorSchema) {
         tooltip.valueLabel('y').nameLabel('x').numberFormat('$');
 
         tooltipContainer = select(
-            '.js-scatter-plot-chart-tooltip-container .scatter-plot .metadata-group'
+            '.js-scatter-plot-chart-tooltip-container .scatter-plot .metadata-group',
         );
         tooltipContainer.datum([]).call(tooltip);
     }
@@ -66,7 +66,7 @@ function createScatterPlotWithIncreasedAreaAndHollowCircles() {
     let scatterChart = scatterPlot();
     let tooltip = miniTooltip();
     let scatterPlotContainer = select(
-        '.js-scatter-plot-container-with-hollow-circles'
+        '.js-scatter-plot-container-with-hollow-circles',
     );
     let containerWidth = scatterPlotContainer.node()
         ? scatterPlotContainer.node().getBoundingClientRect().width
@@ -99,7 +99,7 @@ function createScatterPlotWithIncreasedAreaAndHollowCircles() {
         scatterPlotContainer.datum(dataset).call(scatterChart);
 
         tooltipContainer = select(
-            '.js-scatter-plot-container-with-hollow-circles .scatter-plot .metadata-group'
+            '.js-scatter-plot-container-with-hollow-circles .scatter-plot .metadata-group',
         );
         tooltipContainer.datum([]).call(tooltip);
     }
@@ -125,6 +125,6 @@ if (select('.js-scatter-plot-chart-tooltip-container').node()) {
         '.scatter-plot',
         function (newSchema) {
             createScatterPlotWithSingleSource(newSchema);
-        }
+        },
     );
 }