@operational/visualizations - npm Package Compare versions

Comparing version 7.0.20 to 7.0.21-alpha.101

lib/Area.js

@@ -5,5 +5,6 @@ import { area, line } from "d3-shape";
 import { isFunction } from "./utils";
+import { baseStyle as baseLabelStyle, verticalStyle as verticalLabelStyle } from "./Labels";
 export const Area = props => {
     const defaultTransform = useChartTransform();
-    const { metricDirection, data, transform, metric, categorical, metricScale, categoricalScale, stack, style } = props;
+    const { metricDirection, data, transform, metric, categorical, metricScale, categoricalScale, stack, showLabels, style } = props;
     // The categorical scale must be a band scale for composability with bar charts.
@@ -59,3 +60,3 @@ // Half of the tick width must be added to align with the ticks.
                     m0: accumulatedValue,
-                    m1: metricValue ? accumulatedValue + metricValue : undefined,
+                    m1: isDefined(metricValue) ? accumulatedValue + metricValue : undefined,
                 };
@@ -71,4 +72,7 @@ }),
             } })),
-        stackedData.map((stack, i) => React.createElement("path", { key: `Line-${i}`, d: strokePath.defined(d => isDefined(d.m1))(stack.data) || "", style: { stroke: "#fff", fill: "none" } }))));
+        stackedData.map((stack, i) => React.createElement("path", { key: `Line-${i}`, d: strokePath.defined(d => isDefined(d.m1))(stack.data) || "", style: { stroke: "#fff", fill: "none" } })),
+        showLabels && stackedData.map((stack, i) => stack.data.map((d, j) => metricDirection === "vertical"
+            ? React.createElement("text", { key: `Label-${i}-${j}`, x: (categoricalScale(d.c) || 0) + categoricalTickWidth / 2, y: metricScale(d.m1), dy: "-0.35em", style: verticalLabelStyle }, isDefined(d.m1) && isDefined(d.m0) ? d.m1 - d.m0 : "")
+            : React.createElement("text", { key: `Label-${i}-${j}`, x: metricScale(d.m1), y: (categoricalScale(d.c) || 0) + categoricalTickWidth / 2, dx: "0.35em", dy: "0.35em", style: baseLabelStyle }, isDefined(d.m1) && isDefined(d.m0) ? d.m1 - d.m0 : "")))));
 };
 //# sourceMappingURL=Area.js.map

lib/Bars.js

 import React from "react";
 import { useChartTransform } from "./Chart";
 import { isFunction } from "./utils";
+import { baseStyle as baseLabelStyle, verticalStyle as verticalLabelStyle } from "./Labels";
 export const Bars = props => {
     const defaultTransform = useChartTransform();
-    const { data, transform, metric, categorical, metricScale, categoricalScale, style } = props;
+    const { data, transform, metric, categorical, metricScale, categoricalScale, showLabels, style } = props;
+    const bandWidth = categoricalScale.bandwidth();
     if (props.metricDirection === "vertical") {
         const height = metricScale(metricScale.domain()[0]);
         let accumulatedHeight = 0;
-        return (React.createElement("g", { transform: transform || defaultTransform }, data.mapRows((row, i) => {
-            const bar = (React.createElement("rect", { x: categoricalScale(categorical(row)), y: metricScale(metric(row)) - accumulatedHeight, width: categoricalScale.bandwidth(), height: height - metricScale(metric(row)), style: isFunction(style) ? style(row, i) : style, key: i }));
-            accumulatedHeight += height - metricScale(metric(row));
-            return bar;
-        })));
+        // The `Labels` component can't be used here due to stacking
+        // labels need to be computed per row, but then rendered at the end to avoid being hidden by stacked bar segments
+        const labels = [];
+        return (React.createElement("g", { transform: transform || defaultTransform },
+            data.mapRows((row, i) => {
+                const bar = (React.createElement("rect", { x: categoricalScale(categorical(row)), y: metricScale(metric(row)) - accumulatedHeight, width: categoricalScale.bandwidth(), height: height - metricScale(metric(row)), style: isFunction(style) ? style(row, i) : style, key: `bar-${i}` }));
+                const label = (React.createElement("text", { x: categoricalScale(categorical(row)) + bandWidth / 2, y: metricScale(metric(row)) - accumulatedHeight, dy: "-0.35em", style: verticalLabelStyle, key: `label-${i}` }, metric(row)));
+                labels.push(label);
+                accumulatedHeight += height - metricScale(metric(row));
+                return bar;
+            }),
+            showLabels && labels));
     }
     else {
         let accumulatedWidth = 0;
-        return (React.createElement("g", { transform: transform || defaultTransform }, data.mapRows((row, i) => {
-            const bar = (React.createElement("rect", { y: categoricalScale(categorical(row)), x: accumulatedWidth, height: categoricalScale.bandwidth(), width: metricScale(metric(row)), style: isFunction(style) ? style(row, i) : style, key: i }));
-            accumulatedWidth += metricScale(metric(row));
-            return bar;
-        })));
+        // The `Labels` component can't be used here due to stacking
+        // labels need to be computed per row, but then rendered at the end to avoid being hidden by stacked bar segments
+        const labels = [];
+        return (React.createElement("g", { transform: transform || defaultTransform },
+            data.mapRows((row, i) => {
+                const bar = (React.createElement("rect", { y: categoricalScale(categorical(row)), x: accumulatedWidth, height: categoricalScale.bandwidth(), width: metricScale(metric(row)), style: isFunction(style) ? style(row, i) : style, key: `bar-${i}` }));
+                const label = (React.createElement("text", { x: metricScale(metric(row)) + accumulatedWidth, y: categoricalScale(categorical(row)) + bandWidth / 2, dx: "0.35em", dy: "0.35em", style: baseLabelStyle, key: `label-${i}` }, metric(row)));
+                labels.push(label);
+                accumulatedWidth += metricScale(metric(row));
+                return bar;
+            }),
+            showLabels && labels));
     }
 };
 //# sourceMappingURL=Bars.js.map

lib/Chart.d.ts

@@ -14,3 +14,3 @@ import React, { CSSProperties } from "react";
 }
-export declare const useAxisTransform: (direction: "left" | "right" | "bottom" | "top") => string;
+export declare const useAxisTransform: (direction: "left" | "right" | "top" | "bottom") => string;
 export declare const useChartTransform: () => string;
@@ -17,0 +17,0 @@ /**

lib/Dots.js

 import React from "react";
 import { useChartTransform } from "./Chart";
 import { isFunction } from "./utils";
+import { Labels } from "./Labels";
 const radius = 3;
 export const Dots = props => {
     const defaultTransform = useChartTransform();
-    const { data, transform, metric, categorical, metricScale, categoricalScale, metricDirection, style } = props;
+    const { data, transform, metric, categorical, metricScale, categoricalScale, metricDirection, showLabels, style } = props;
     const bandWidth = categoricalScale.bandwidth();
     // this doesn't make much sense for ScatterPlot, but this is temprorary solution for compatibility
-    if (metricDirection === "vertical") {
-        return (React.createElement("g", { transform: transform || defaultTransform }, data.mapRows((row, i) => (React.createElement("circle", { cx: categoricalScale(categorical(row)) + bandWidth / 2, cy: metricScale(metric(row)), r: radius, style: isFunction(style) ? style(row, i) : style, key: i })))));
-    }
-    else {
-        return (React.createElement("g", { transform: transform || defaultTransform }, data.mapRows((row, i) => (React.createElement("circle", { cx: metricScale(metric(row)), cy: categoricalScale(categorical(row)) + bandWidth / 2, r: radius, style: isFunction(style) ? style(row, i) : style, key: i })))));
-    }
+    return React.createElement(React.Fragment, null,
+        metricDirection === "vertical"
+            ? React.createElement("g", { transform: transform || defaultTransform }, data.mapRows((row, i) => (React.createElement("circle", { cx: categoricalScale(categorical(row)) + bandWidth / 2, cy: metricScale(metric(row)), r: radius, style: isFunction(style) ? style(row, i) : style, key: i }))))
+            : React.createElement("g", { transform: transform || defaultTransform }, data.mapRows((row, i) => (React.createElement("circle", { cx: metricScale(metric(row)), cy: categoricalScale(categorical(row)) + bandWidth / 2, r: radius, style: isFunction(style) ? style(row, i) : style, key: i })))),
+        showLabels && React.createElement(Labels, { data: data, transform: transform, metric: metric, categorical: categorical, metricScale: metricScale, categoricalScale: categoricalScale, metricDirection: metricDirection, style: { transform: metricDirection === "vertical" ? `translate(0, -${radius}px)` : `translate(${radius}px, 0)` } }));
 };
 //# sourceMappingURL=Dots.js.map

lib/Labels.d.ts

@@ -0,3 +1,6 @@
+import React from "react";
 import { DiscreteAxialChart } from "./types";
+export declare const baseStyle: React.CSSProperties;
+export declare const verticalStyle: React.CSSProperties;
 export declare const Labels: DiscreteAxialChart<string>;
 //# sourceMappingURL=Labels.d.ts.map

lib/Labels.js

@@ -5,7 +5,7 @@ import React from "react";
 import theme from "./theme";
-const baseStyle = {
+export const baseStyle = {
     fontSize: theme.font.size.small,
-    color: theme.colors.axis.label
+    fill: theme.font.color,
 };
-const verticalStyle = {
+export const verticalStyle = {
     ...baseStyle,
@@ -25,3 +25,3 @@ textAnchor: "middle"
     else {
-        return (React.createElement("g", { transform: transform || defaultTransform }, data.mapRows((row, i) => (React.createElement("text", { x: metricScale(metric(row)), y: categoricalScale(categorical(row)) + bandWidth / 2, dx: 4, dy: "0.35em", style: {
+        return (React.createElement("g", { transform: transform || defaultTransform }, data.mapRows((row, i) => (React.createElement("text", { x: metricScale(metric(row)), y: categoricalScale(categorical(row)) + bandWidth / 2, dx: "0.35em", dy: "0.35em", style: {
                 ...baseStyle,
@@ -28,0 +28,0 @@ ...(isFunction(style) ? style(row, i) : style)

lib/Line.js

@@ -5,5 +5,6 @@ import { line } from "d3-shape";
 import { isFunction } from "./utils";
+import { Labels } from "./Labels";
 export const Line = React.memo(props => {
     const defaultTransform = useChartTransform();
-    const { metricDirection, data, transform, metric, categorical, metricScale, categoricalScale, style } = props;
+    const { metricDirection, data, transform, metric, categorical, metricScale, categoricalScale, showLabels, style } = props;
     // The categorical scale must be a band scale for composability with bar charts.
@@ -36,9 +37,11 @@ // Half of the tick width must be added to align with the ticks.
     const pathStyle = (isFunction(style) ? style(data.row(0), 0) : style) || {};
-    return (React.createElement("g", { transform: transform || defaultTransform },
-        React.createElement("path", { d: path, style: {
-                fill: "none",
-                strokeLinecap: "round",
-                ...pathStyle
-            } })));
+    return (React.createElement(React.Fragment, null,
+        React.createElement("g", { transform: transform || defaultTransform },
+            React.createElement("path", { d: path, style: {
+                    fill: "none",
+                    strokeLinecap: "round",
+                    ...pathStyle
+                } })),
+        showLabels && React.createElement(Labels, { data: data, transform: transform, metric: metric, categorical: categorical, metricScale: metricScale, categoricalScale: categoricalScale, metricDirection: metricDirection })));
 });
 //# sourceMappingURL=Line.js.map

lib/PieChart.d.ts

@@ -8,2 +8,3 @@ import React from "react";
     metric: ColumnCursor<Name>;
+    showLabels: boolean;
     transform?: React.SVGAttributes<SVGRectElement>["transform"];
@@ -10,0 +11,0 @@ style?: React.SVGAttributes<SVGGElement>["style"] | ((row: RowCursor, i: number) => React.SVGAttributes<SVGGElement>["style"]);

lib/PieChart.js

@@ -5,10 +5,21 @@ import React from "react";
 import { useChartTransform } from "./Chart";
+import { verticalStyle as verticalLabelStyle } from "./Labels";
 export const PieChart = (props) => {
     const defaultTransform = useChartTransform();
-    const { data, width, height, metric, transform, style } = props;
+    const { data, width, height, metric, showLabels, transform, style } = props;
     const pieData = pie().value(metric)(data.mapRows(row => row));
-    const segmentPath = (datum) => arc().innerRadius(0).outerRadius(Math.min(width, height) / 2)(datum) || "";
+    const radius = Math.min(width, height) / 2;
+    const segmentArc = arc().innerRadius(0).outerRadius(radius);
+    const segmentArcForLabel = arc().innerRadius(0.7 * radius).outerRadius(radius);
     return (React.createElement("g", { transform: transform || defaultTransform },
-        React.createElement("g", { transform: `translate(${width / 2},${height / 2})` }, pieData.map((datum, i) => (React.createElement("path", { key: i, d: segmentPath(datum), style: isFunction(style) ? style(datum.data, i) : style }))))));
+        React.createElement("g", { transform: `translate(${width / 2},${height / 2})` }, pieData.map((datum, i) => {
+            const labelPosition = segmentArcForLabel.centroid(datum);
+            return (React.createElement(React.Fragment, null,
+                React.createElement("path", { key: `segment-${i}`, d: segmentArc(datum) || "", style: isFunction(style) ? style(datum.data, i) : style }),
+                showLabels && React.createElement("text", { x: labelPosition[0], y: labelPosition[1], style: {
+                        ...verticalLabelStyle,
+                        fill: "white",
+                    }, key: `label-${i}` }, datum.value)));
+        }))));
 };
 //# sourceMappingURL=PieChart.js.map

lib/types.d.ts

@@ -11,2 +11,3 @@ /// <reference types="react" />
     categoricalScale: ScaleBand<string>;
+    showLabels?: boolean;
     transform?: React.SVGAttributes<SVGRectElement>["transform"];
@@ -13,0 +14,0 @@ style?: React.SVGAttributes<SVGGElement>["style"] | ((row: RowCursor, i: number) => React.SVGAttributes<SVGGElement>["style"]);

package.json

 {
   "name": "@operational/visualizations",
-  "version": "7.0.20",
+  "version": "7.0.21-alpha.101+c00d0c6",
   "description": "Contiamo visualization library.",
@@ -35,3 +35,3 @@ "main": "./lib/index.js",
   "devDependencies": {
-    "@operational/frame": "*",
+    "@operational/frame": "^0.3.9-alpha.101+c00d0c6",
     "@types/d3-axis": "^1.0.12",
@@ -41,3 +41,4 @@ "@types/d3-scale": "^2.1.1",
     "@types/d3-shape": "^1.3.1"
-  }
+  },
+  "gitHead": "c00d0c63f7cd5eb927b82476aa99b80a4a164a1f"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

80289

increased by22.33%

Number of package files

75

increased by13.64%

Lines of code

809

increased by12.05%

Worsened metrics

Number of low quality alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes