semiotic 2.0.0 → 2.0.2

package/dist/semiotic.js

@@ -10,7 +10,7 @@ var d3Array = require('d3-array');
 var d3Scale = require('d3-scale');
 var d3Brush = require('d3-brush');
 var d3Selection = require('d3-selection');
-var d3Voronoi = require('d3-voronoi');
+var d3Delaunay = require('d3-delaunay');
 var d3Interpolate = require('d3-interpolate');
 var d3Contour = require('d3-contour');
 var d3Hexbin = require('d3-hexbin');
@@ -18,7 +18,6 @@ var regression = require('regression');
 var d3Hierarchy = require('d3-hierarchy');
 var d3Polygon = require('d3-polygon');
 var Offset = require('polygon-offset');
-var d3Collection = require('d3-collection');
 var d3Force = require('d3-force');
 var pathBounds = require('svg-path-bounding-box');
 var d3Glyphedge = require('d3-glyphedge');
@@ -1061,7 +1060,12 @@ function __awaiter(thisArg, _arguments, P, generator) {
         function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
-}
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 const findFirstAccessorValue = (accessorArray, data) => {
     for (let i = 0; i < accessorArray.length; i++) {
@@ -1856,32 +1860,28 @@ const calculateOverlay = (props, voronoiHover) => {
                 }
             }
         }
-        const voronoiXExtent = d3Array.extent(voronoiDataset.map((d) => d.voronoiX));
-        const voronoiYExtent = d3Array.extent(voronoiDataset.map((d) => d.voronoiY));
+        let voronoiXExtent = d3Array.extent(voronoiDataset.map((d) => d.voronoiX));
+        let voronoiYExtent = d3Array.extent(voronoiDataset.map((d) => d.voronoiY));
+        if (voronoiXExtent[0] == null || voronoiYExtent == null) {
+            voronoiXExtent = [0, 0];
+            voronoiYExtent = [0, 0];
+        }
         const voronoiExtent = [
-            [
-                Math.min(voronoiXExtent[0] - 5, -interactionOverflow.left),
-                Math.min(voronoiYExtent[0] - 5, -interactionOverflow.top)
-            ],
-            [
-                Math.max(voronoiXExtent[1] + 5, size[0] + interactionOverflow.right),
-                Math.max(voronoiYExtent[1] + 5, size[1] + interactionOverflow.bottom)
-            ]
+            Math.min(voronoiXExtent[0] - 5, -interactionOverflow.left),
+            Math.min(voronoiYExtent[0] - 5, -interactionOverflow.top),
+            Math.max(voronoiXExtent[1] + 5, size[0] + interactionOverflow.right),
+            Math.max(voronoiYExtent[1] + 5, size[1] + interactionOverflow.bottom)
         ];
-        const voronoiDiagram = d3Voronoi.voronoi()
-            .extent(voronoiExtent)
-            .x((d) => d.voronoiX)
-            .y((d) => d.voronoiY);
-        const voronoiData = voronoiDiagram.polygons(voronoiDataset);
-        voronoiPaths = voronoiData.map((d, i) => {
+        const delaunay = d3Delaunay.Delaunay.from(voronoiDataset, (d) => d.voronoiX, (d) => d.voronoiY);
+        const voronoi = delaunay.voronoi(voronoiExtent);
+        voronoiPaths = voronoiDataset.map((d, i) => {
             let clipPath = null;
             if (advancedSettings.voronoiClipping) {
                 const circleSize = advancedSettings.voronoiClipping === true
                     ? 50
                     : advancedSettings.voronoiClipping;
-                const correspondingD = voronoiDataset[i];
                 clipPath = (React__namespace.createElement("clipPath", { id: `voronoi-${i}` },
-                    React__namespace.createElement("circle", { r: circleSize, cx: correspondingD.voronoiX, cy: correspondingD.voronoiY })));
+                    React__namespace.createElement("circle", { r: circleSize, cx: d.voronoiX, cy: d.voronoiY })));
             }
             return (React__namespace.createElement("g", { key: `voronoi-${i}` },
                 React__namespace.createElement("path", { onClick: (e) => {
@@ -1892,7 +1892,7 @@ const calculateOverlay = (props, voronoiHover) => {
                         changeVoronoi(voronoiHover, voronoiDataset[i], hoverAnnotation, customHoverBehavior, points, e);
                     }, onMouseLeave: (e) => {
                         changeVoronoi(voronoiHover, undefined, undefined, customHoverBehavior, undefined, e);
-                    }, key: `interactionVoronoi${i}`, d: `M${d.join("L")}Z`, style: Object.assign({ fillOpacity: 0 }, pointerStyle), clipPath: `url(#voronoi-${i})` }),
+                    }, key: `interactionVoronoi${i}`, d: voronoi.renderCell(i), style: Object.assign({ fillOpacity: 0 }, pointerStyle), clipPath: `url(#voronoi-${i})` }),
                 clipPath));
         }, window);
         return voronoiPaths;
@@ -4160,16 +4160,19 @@ function bucketizedRenderingFn({ data, type, renderMode, eventListenersGenerator
                 translate = [0, 0];
             }
             if (type.axis && type.type === "histogram") {
-                renderedSummaryMarks.push(createSummaryAxis({
-                    summary,
-                    summaryI,
-                    axisSettings: type.axis,
-                    axisCreator,
-                    projection,
-                    actualMax,
-                    adjustedSize,
-                    columnWidth
-                }));
+                renderedSummaryMarks.push({
+                    type: "svg-only-mark",
+                    Mark: createSummaryAxis({
+                        summary,
+                        summaryI,
+                        axisSettings: type.axis,
+                        axisCreator,
+                        projection,
+                        actualMax,
+                        adjustedSize,
+                        columnWidth
+                    })
+                });
             }
             mappedBars.points.forEach((d) => {
                 d.x += translate[0];
@@ -9546,16 +9549,32 @@ const calculateOrdinalFrame = (currentProps, currentState) => {
         ]);
     }
     else {
-        const positiveData = allData.filter((d) => d.value >= 0);
-        const negativeData = allData.filter((d) => d.value < 0);
-        const nestedPositiveData = d3Collection.nest()
-            .key((d) => d.column)
-            .rollup((leaves) => d3Array.sum(leaves, (d) => d.value))
-            .entries(positiveData);
-        const nestedNegativeData = d3Collection.nest()
-            .key((d) => d.column)
-            .rollup((leaves) => d3Array.sum(leaves, (d) => d.value))
-            .entries(negativeData);
+        const nestedPositiveData = [];
+        const nestedNegativeData = [];
+        const positiveDataKeys = {};
+        const negativeDataKeys = {};
+        for (const datum of allData) {
+            if (datum.value >= 0) {
+                if (!positiveDataKeys[datum.column]) {
+                    positiveDataKeys[datum.column] = {
+                        column: datum.column,
+                        value: 0
+                    };
+                    nestedPositiveData.push(positiveDataKeys[datum.column]);
+                }
+                positiveDataKeys[datum.column].value += datum.value;
+            }
+            else {
+                if (!negativeDataKeys[datum.column]) {
+                    negativeDataKeys[datum.column] = {
+                        column: datum.column,
+                        value: 0
+                    };
+                    nestedNegativeData.push(negativeDataKeys[datum.column]);
+                }
+                negativeDataKeys[datum.column].value += datum.value;
+            }
+        }
         const positiveAnnotations = annotationsForExtent.filter((d) => d > 0);
         rExtent = [
             0,
@@ -9605,12 +9624,12 @@ const calculateOrdinalFrame = (currentProps, currentState) => {
         rExtent = [rExtent[1], rExtent[0]];
     }
     const nestedPieces = {};
-    d3Collection.nest()
-        .key((d) => d.column)
-        .entries(allData)
-        .forEach((d) => {
-        nestedPieces[d.key] = d.values;
-    });
+    for (const datum of allData) {
+        if (!nestedPieces[datum.column]) {
+            nestedPieces[datum.column] = [];
+        }
+        nestedPieces[datum.column].push(datum);
+    }
     if (oSort !== undefined) {
         oExtent = oExtent.sort((a, b) => oSort(a, b, nestedPieces[a].map((d) => d.data), nestedPieces[b].map((d) => d.data)));
         oScale.domain(oExtent);

package/dist/semiotic.module.js

@@ -7,7 +7,7 @@ import { sum, extent as extent$1, quantile, histogram, max, min } from 'd3-array
 import { scaleLinear, scaleOrdinal, scaleBand } from 'd3-scale';
 import { brushX, brushY, brush } from 'd3-brush';
 import { select } from 'd3-selection';
-import { voronoi } from 'd3-voronoi';
+import { Delaunay } from 'd3-delaunay';
 import { interpolateNumber } from 'd3-interpolate';
 import { contourDensity } from 'd3-contour';
 import { hexbin } from 'd3-hexbin';
@@ -15,7 +15,6 @@ import regression from 'regression';
 import { packEnclose, hierarchy, tree, pack, cluster, treemap, partition } from 'd3-hierarchy';
 import { polygonHull } from 'd3-polygon';
 import Offset from 'polygon-offset';
-import { nest } from 'd3-collection';
 import { forceSimulation, forceY, forceX, forceCollide, forceLink, forceManyBody } from 'd3-force';
 import pathBounds from 'svg-path-bounding-box';
 import { d } from 'd3-glyphedge';
@@ -1030,7 +1029,12 @@ function __awaiter(thisArg, _arguments, P, generator) {
         function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
-}
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 const findFirstAccessorValue = (accessorArray, data) => {
     for (let i = 0; i < accessorArray.length; i++) {
@@ -1825,32 +1829,28 @@ const calculateOverlay = (props, voronoiHover) => {
                 }
             }
         }
-        const voronoiXExtent = extent$1(voronoiDataset.map((d) => d.voronoiX));
-        const voronoiYExtent = extent$1(voronoiDataset.map((d) => d.voronoiY));
+        let voronoiXExtent = extent$1(voronoiDataset.map((d) => d.voronoiX));
+        let voronoiYExtent = extent$1(voronoiDataset.map((d) => d.voronoiY));
+        if (voronoiXExtent[0] == null || voronoiYExtent == null) {
+            voronoiXExtent = [0, 0];
+            voronoiYExtent = [0, 0];
+        }
         const voronoiExtent = [
-            [
-                Math.min(voronoiXExtent[0] - 5, -interactionOverflow.left),
-                Math.min(voronoiYExtent[0] - 5, -interactionOverflow.top)
-            ],
-            [
-                Math.max(voronoiXExtent[1] + 5, size[0] + interactionOverflow.right),
-                Math.max(voronoiYExtent[1] + 5, size[1] + interactionOverflow.bottom)
-            ]
+            Math.min(voronoiXExtent[0] - 5, -interactionOverflow.left),
+            Math.min(voronoiYExtent[0] - 5, -interactionOverflow.top),
+            Math.max(voronoiXExtent[1] + 5, size[0] + interactionOverflow.right),
+            Math.max(voronoiYExtent[1] + 5, size[1] + interactionOverflow.bottom)
         ];
-        const voronoiDiagram = voronoi()
-            .extent(voronoiExtent)
-            .x((d) => d.voronoiX)
-            .y((d) => d.voronoiY);
-        const voronoiData = voronoiDiagram.polygons(voronoiDataset);
-        voronoiPaths = voronoiData.map((d, i) => {
+        const delaunay = Delaunay.from(voronoiDataset, (d) => d.voronoiX, (d) => d.voronoiY);
+        const voronoi = delaunay.voronoi(voronoiExtent);
+        voronoiPaths = voronoiDataset.map((d, i) => {
             let clipPath = null;
             if (advancedSettings.voronoiClipping) {
                 const circleSize = advancedSettings.voronoiClipping === true
                     ? 50
                     : advancedSettings.voronoiClipping;
-                const correspondingD = voronoiDataset[i];
                 clipPath = (React.createElement("clipPath", { id: `voronoi-${i}` },
-                    React.createElement("circle", { r: circleSize, cx: correspondingD.voronoiX, cy: correspondingD.voronoiY })));
+                    React.createElement("circle", { r: circleSize, cx: d.voronoiX, cy: d.voronoiY })));
             }
             return (React.createElement("g", { key: `voronoi-${i}` },
                 React.createElement("path", { onClick: (e) => {
@@ -1861,7 +1861,7 @@ const calculateOverlay = (props, voronoiHover) => {
                         changeVoronoi(voronoiHover, voronoiDataset[i], hoverAnnotation, customHoverBehavior, points, e);
                     }, onMouseLeave: (e) => {
                         changeVoronoi(voronoiHover, undefined, undefined, customHoverBehavior, undefined, e);
-                    }, key: `interactionVoronoi${i}`, d: `M${d.join("L")}Z`, style: Object.assign({ fillOpacity: 0 }, pointerStyle), clipPath: `url(#voronoi-${i})` }),
+                    }, key: `interactionVoronoi${i}`, d: voronoi.renderCell(i), style: Object.assign({ fillOpacity: 0 }, pointerStyle), clipPath: `url(#voronoi-${i})` }),
                 clipPath));
         }, window);
         return voronoiPaths;
@@ -4129,16 +4129,19 @@ function bucketizedRenderingFn({ data, type, renderMode, eventListenersGenerator
                 translate = [0, 0];
             }
             if (type.axis && type.type === "histogram") {
-                renderedSummaryMarks.push(createSummaryAxis({
-                    summary,
-                    summaryI,
-                    axisSettings: type.axis,
-                    axisCreator,
-                    projection,
-                    actualMax,
-                    adjustedSize,
-                    columnWidth
-                }));
+                renderedSummaryMarks.push({
+                    type: "svg-only-mark",
+                    Mark: createSummaryAxis({
+                        summary,
+                        summaryI,
+                        axisSettings: type.axis,
+                        axisCreator,
+                        projection,
+                        actualMax,
+                        adjustedSize,
+                        columnWidth
+                    })
+                });
             }
             mappedBars.points.forEach((d) => {
                 d.x += translate[0];
@@ -9515,16 +9518,32 @@ const calculateOrdinalFrame = (currentProps, currentState) => {
         ]);
     }
     else {
-        const positiveData = allData.filter((d) => d.value >= 0);
-        const negativeData = allData.filter((d) => d.value < 0);
-        const nestedPositiveData = nest()
-            .key((d) => d.column)
-            .rollup((leaves) => sum(leaves, (d) => d.value))
-            .entries(positiveData);
-        const nestedNegativeData = nest()
-            .key((d) => d.column)
-            .rollup((leaves) => sum(leaves, (d) => d.value))
-            .entries(negativeData);
+        const nestedPositiveData = [];
+        const nestedNegativeData = [];
+        const positiveDataKeys = {};
+        const negativeDataKeys = {};
+        for (const datum of allData) {
+            if (datum.value >= 0) {
+                if (!positiveDataKeys[datum.column]) {
+                    positiveDataKeys[datum.column] = {
+                        column: datum.column,
+                        value: 0
+                    };
+                    nestedPositiveData.push(positiveDataKeys[datum.column]);
+                }
+                positiveDataKeys[datum.column].value += datum.value;
+            }
+            else {
+                if (!negativeDataKeys[datum.column]) {
+                    negativeDataKeys[datum.column] = {
+                        column: datum.column,
+                        value: 0
+                    };
+                    nestedNegativeData.push(negativeDataKeys[datum.column]);
+                }
+                negativeDataKeys[datum.column].value += datum.value;
+            }
+        }
         const positiveAnnotations = annotationsForExtent.filter((d) => d > 0);
         rExtent = [
             0,
@@ -9574,12 +9593,12 @@ const calculateOrdinalFrame = (currentProps, currentState) => {
         rExtent = [rExtent[1], rExtent[0]];
     }
     const nestedPieces = {};
-    nest()
-        .key((d) => d.column)
-        .entries(allData)
-        .forEach((d) => {
-        nestedPieces[d.key] = d.values;
-    });
+    for (const datum of allData) {
+        if (!nestedPieces[datum.column]) {
+            nestedPieces[datum.column] = [];
+        }
+        nestedPieces[datum.column].push(datum);
+    }
     if (oSort !== undefined) {
         oExtent = oExtent.sort((a, b) => oSort(a, b, nestedPieces[a].map((d) => d.data), nestedPieces[b].map((d) => d.data)));
         oScale.domain(oExtent);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "semiotic",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "The semiotic JavaScript data visualization framework",
   "main": "dist/semiotic.js",
   "module": "dist/semiotic.module.js",
@@ -60,17 +60,16 @@
   ],
   "license": "Apache-2.0",
   "devDependencies": {
-    "@babel/core": "^7.16.5",
-    "@babel/preset-env": "^7.16.5",
-    "@babel/preset-react": "^7.16.5",
-    "@babel/preset-typescript": "^7.16.5",
-    "@material-ui/core": "^4.8.1",
+    "@babel/core": "^7.24.4",
+    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-typescript": "^7.24.1",
     "@mdx-js/react": "^1.6.22",
     "@parcel/transformer-inline-string": "^2.8.2",
     "@parcel/transformer-mdx": "^2.8.2",
     "@playwright/test": "^1.17.1",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^14.3.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/d3-scale": "^2.1.1",
     "@types/node": "^13.7.4",
@@ -80,14 +79,14 @@
     "@vx/pattern": "0.0.143",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
     "babel-eslint": "^7.2.3",
-    "babel-jest": "^27.4.5",
+    "babel-jest": "^27.5.1",
     "classnames": "2.2.5",
     "conventional-changelog-cli": "1.1.1",
     "conventional-recommended-bump": "0.3.0",
     "d3-dsv": "1.0.5",
     "d3-flextree-v4": "^1.0.1",
     "d3-random": "1.0.1",
-    "d3-sankey": "0.7.1",
+    "d3-sankey": "0.12.3",
     "dagre": "^0.8.2",
     "dentist": "1.0.3",
     "enzyme": "3.1.0",
@@ -129,29 +128,28 @@
     "react-dom": "^18.1.0"
   },
   "dependencies": {
-    "d3-array": "^1.2.0",
-    "d3-brush": "^2.1.0",
-    "d3-chord": "^1.0.4",
-    "d3-collection": "^1.0.1",
+    "d3-array": "3.2.4",
+    "d3-brush": "3.0.0",
+    "d3-chord": "3.0.1",
     "d3-contour": "^1.1.1",
-    "d3-force": "^1.0.2",
+    "d3-delaunay": "^6.0.4",
+    "d3-force": "3.0.0",
     "d3-glyphedge": "^1.2.0",
     "d3-hexbin": "^0.2.2",
-    "d3-hierarchy": "^1.1.3",
-    "d3-interpolate": "^1.1.5",
+    "d3-hierarchy": "3.1.2",
+    "d3-interpolate": "3.0.1",
     "d3-path-arrows": "^0.4.0",
-    "d3-polygon": "^1.0.5",
-    "d3-sankey-circular": "0.25.0",
-    "d3-scale": "^1.0.3",
-    "d3-selection": "2",
-    "d3-shape": "^1.3.5",
-    "d3-voronoi": "^1.0.2",
+    "d3-polygon": "3.0.1",
+    "d3-sankey-circular": "0.34.0",
+    "d3-scale": "4.0.2",
+    "d3-selection": "3.0.0",
+    "d3-shape": "3.2.0",
     "dequal": "^2.0.3",
     "labella": "1.1.4",
     "memoize-one": "^5.1.1",
     "object-assign": "4.1.1",
     "polygon-offset": "0.3.1",
-    "react-annotation": "3.0.0-beta.4",
+    "react-annotation": "3.0.0-beta.5",
     "regression": "^2.0.1",
     "svg-path-bounding-box": "1.0.4"
   },

package/dist/semiotic.d.ts

@@ -1,35 +0,0 @@
-import AnnotationLayer from "./AnnotationLayer";
-import DividedLine from "./DividedLine";
-import XYFrame from "./XYFrame";
-import OrdinalFrame from "./OrdinalFrame";
-import MinimapXYFrame from "./MinimapXYFrame";
-import MiniMap from "./MiniMap";
-import Axis from "./Axis";
-import Legend from "./Legend";
-import Annotation from "./Annotation";
-import Brush from "./Brush";
-import InteractionLayer from "./InteractionLayer";
-import VisualizationLayer from "./VisualizationLayer";
-import NetworkFrame from "./NetworkFrame";
-import { funnelize } from "./svg/lineDrawing";
-import { calculateDataExtent } from "./data/dataFunctions";
-import FacetController from "./FacetController";
-import { ResponsiveNetworkFrame } from "./ResponsiveNetworkFrame";
-import { ResponsiveMinimapXYFrame } from "./ResponsiveMinimapXYFrame";
-import { ResponsiveXYFrame } from "./ResponsiveXYFrame";
-import { ResponsiveOrdinalFrame } from "./ResponsiveOrdinalFrame";
-import { SparkXYFrame } from "./SparkXYFrame";
-import { SparkOrdinalFrame } from "./SparkOrdinalFrame";
-import { SparkNetworkFrame } from "./SparkNetworkFrame";
-import Mark from "../components/Mark/Mark";
-import { hexbinning, heatmapping } from "./svg/areaDrawing";
-import { nodesEdgesFromHierarchy } from "./processing/network";
-export { AnnotationLayer, DividedLine, XYFrame, MinimapXYFrame, MiniMap, Brush, Axis, InteractionLayer, VisualizationLayer, OrdinalFrame, Annotation, NetworkFrame, ResponsiveMinimapXYFrame, ResponsiveOrdinalFrame, ResponsiveNetworkFrame, ResponsiveXYFrame, SparkOrdinalFrame, SparkNetworkFrame, SparkXYFrame, Legend, Mark, funnelize, calculateDataExtent, FacetController, hexbinning, heatmapping, nodesEdgesFromHierarchy };
-export { NodeType, EdgeType, GraphSettingsType, NetworkSettingsType, NetworkFrameState, NetworkFrameProps } from "./types/networkTypes";
-export { AnnotationType, CustomHoverType, AnnotationTypes, AnnotationHandling, AnnotationProps, AxisProps, AxisGeneratingFunction } from "./types/annotationTypes";
-export { ContextType } from "./types/canvasTypes";
-export { GenericObject, MarginType, ProjectionTypes, ExtentType, ProjectedPoint, PieceLayoutType, ProjectedLine, ProjectedSummary, RoughType, CanvasPostProcessTypes, ExtentSettingsType, accessorType, AccessorFnType, BasicLineTypes, LineTypeSettings, BasicSummaryTypes, SummaryTypeSettings, RawLine, RawSummary, RawPoint, CustomAreaMarkProps, ProjectedBin, GenericAccessor, VizLayerTypes, RenderPipelineType, OrdinalSummaryTypes, OrdinalSummaryTypeSettings, AxisSummaryTypeSettings, GeneralFrameProps, GeneralFrameState } from "./types/generalTypes";
-export { AdvancedInteractionSettings, Interactivity, InteractionLayerProps, VoronoiEntryType, BaseColumnType, InteractionLayerState } from "./types/interactionTypes";
-export { SupportedLegendGlyphs, ItemType, LegendItem, LegendGroup, LegendProps } from "./types/legendTypes";
-export { OExtentObject, PieceTypes, PieceTypeSettings, ProjectedOrdinalSummary, OrdinalFrameProps, OrdinalFrameState } from "./types/ordinalTypes";
-export { XYFrameProps, AnnotatedSettingsProps, XYFrameState, SummaryLayoutType } from "./types/xyTypes";