td-stylekit 28.20.0 → 28.21.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [28.21.0](https://github.com/treasure-data/td-stylekit/compare/v28.20.0...v28.21.0) (2023-05-08)
+
+
+### Features
+
+* **CON-12722:** Add a custom legend renderer to the PieChart component ([#1467](https://github.com/treasure-data/td-stylekit/issues/1467)) ([f812110](https://github.com/treasure-data/td-stylekit/commit/f812110))
+
 # [28.20.0](https://github.com/treasure-data/td-stylekit/compare/v28.19.0...v28.20.0) (2023-04-13)
 
 

package/dist/es/PieChart/PieChart.d.ts

@@ -5,6 +5,18 @@ export type PieChartData = {
     percent?: string;
     index?: number;
 } & chartUtils.Datum;
+export interface CustomLegendRendererArguments {
+    width: number;
+    height: number;
+    colorScale: string[];
+    data: {
+        name: string;
+        symbol: {
+            type: string;
+            fill: string;
+        };
+    }[];
+}
 export type PieChartProps = {
     width?: number;
     height?: number;
@@ -12,12 +24,14 @@ export type PieChartProps = {
     fixed?: number;
     hoverTitle?: string;
     hoverText?: string;
+    constrainTooltipSide?: ('left' | 'right' | 'top' | 'bottom')[];
+    customLegendRenderer?: (args: CustomLegendRendererArguments) => ReactElement;
     numFormat?: (x: string | number) => string;
     replaceToken?: string;
     isRatioChart?: boolean;
     chartColor?: ChartColors;
 };
-export declare function PieChart({ width, height, data, fixed, hoverText, hoverTitle, replaceToken, isRatioChart, chartColor, numFormat }: PieChartProps): ReactElement;
+export declare function PieChart({ width, height, data, fixed, hoverText, hoverTitle, replaceToken, isRatioChart, chartColor, constrainTooltipSide, customLegendRenderer, numFormat }: PieChartProps): ReactElement;
 export declare namespace PieChart {
     var displayName: string;
 }

package/dist/es/PieChart/PieChart.js

@@ -70,6 +70,8 @@ function PieChart(_ref) {
       _ref$isRatioChart = _ref.isRatioChart,
       isRatioChart = _ref$isRatioChart === void 0 ? false : _ref$isRatioChart,
       chartColor = _ref.chartColor,
+      constrainTooltipSide = _ref.constrainTooltipSide,
+      customLegendRenderer = _ref.customLegendRenderer,
       _ref$numFormat = _ref.numFormat,
       numFormat = _ref$numFormat === void 0 ? function (x) {
     return new Intl.NumberFormat(undefined, {
@@ -194,13 +196,14 @@ function PieChart(_ref) {
   // Need to cast to Record to prevent TS from complaining about incompatible types
 
   var labelsStyle = (_theme$legend = theme.legend) === null || _theme$legend === void 0 ? void 0 : (_theme$legend$style = _theme$legend.style) === null || _theme$legend$style === void 0 ? void 0 : _theme$legend$style.labels;
-  return (0, _jsxRuntime.jsx)(_Box["default"], {
+  return (0, _jsxRuntime.jsxs)(_Box["default"], {
     "data-gs": gs("src", "piechart", "piechart.tsx", "pie-chart", "box"),
     direction: "row",
+    align: "center",
     padding: providerTheme.space[2],
-    children: (0, _jsxRuntime.jsxs)(_victory.VictoryContainer, {
+    children: [(0, _jsxRuntime.jsxs)(_victory.VictoryContainer, {
       "data-gs": gs("src", "piechart", "piechart.tsx", "pie-chart", "box", "victory-container"),
-      width: containerWidth,
+      width: customLegendRenderer ? width : containerWidth,
       height: height,
       children: [(0, _jsxRuntime.jsx)(_victory.VictoryPie, {
         "data-gs-c": gsC("pie"),
@@ -241,7 +244,7 @@ function PieChart(_ref) {
         labels: function labels(_ref5) {
           var datum = _ref5.datum;
           return isRatioChart ? datum.index === 0 // only show the value label and hide total label
-          ? [datum.y === 0 ? '-' : numFormat(Math.floor(datum.y)), datum.percent] : null : [datum.grey ? datum.x : hoverTitle ? hoverTitle.replace(replaceToken, datum.x) : datum.x, datum.percent, hoverText ? hoverText.replace(replaceToken, numFormat(Math.floor(parseFloat(datum.y)))) : datum.y];
+          ? [datum.y === 0 ? '-' : numFormat(Math.floor(datum.y)), datum.percent] : null : !hoverText ? [datum.grey ? datum.x : hoverTitle ? hoverTitle.replace(replaceToken, datum.x) : datum.x, datum.percent] : [datum.grey ? datum.x : hoverTitle ? hoverTitle.replace(replaceToken, datum.x) : datum.x, datum.percent, hoverText.replace(replaceToken, numFormat(Math.floor(parseFloat(datum.y))))];
         },
         labelComponent: isRatioChart ? (0, _jsxRuntime.jsx)(_victory.VictoryLabel, {
           "data-gs": gs("src", "piechart", "piechart.tsx", "pie-chart", "box", "victory-container", "victory-pie", "victory-label"),
@@ -262,6 +265,25 @@ function PieChart(_ref) {
           }]
         }) : (0, _jsxRuntime.jsx)(_victory.VictoryTooltip, {
           "data-gs": gs("src", "piechart", "piechart.tsx", "pie-chart", "box", "victory-container", "victory-pie", "victory-tooltip"),
+          orientation: constrainTooltipSide ? function () {
+            for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+              args[_key] = arguments[_key];
+            }
+
+            var averageAngle = (Number(args[0].datum.startAngle) + Number(args[0].datum.endAngle)) / 2;
+
+            if (averageAngle < 45) {
+              return constrainTooltipSide !== null && constrainTooltipSide !== void 0 && constrainTooltipSide.includes('top') ? 'bottom' : 'top';
+            } else if (averageAngle < 135) {
+              return constrainTooltipSide !== null && constrainTooltipSide !== void 0 && constrainTooltipSide.includes('right') ? 'left' : 'right';
+            } else if (averageAngle < 225) {
+              return constrainTooltipSide !== null && constrainTooltipSide !== void 0 && constrainTooltipSide.includes('bottom') ? 'top' : 'bottom';
+            } else if (averageAngle < 315) {
+              return constrainTooltipSide !== null && constrainTooltipSide !== void 0 && constrainTooltipSide.includes('left') ? 'right' : 'left';
+            }
+
+            return constrainTooltipSide !== null && constrainTooltipSide !== void 0 && constrainTooltipSide.includes('top') ? 'bottom' : 'top';
+          } : undefined,
           cornerRadius: 4,
           pointerLength: 10,
           flyoutStyle: {
@@ -294,7 +316,7 @@ function PieChart(_ref) {
           })
         }),
         events: pieChartEvents
-      }), isRatioChart ? (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {}) : (0, _jsxRuntime.jsx)(_victory.VictoryLegend, {
+      }), !isRatioChart && !customLegendRenderer ? (0, _jsxRuntime.jsx)(_victory.VictoryLegend, {
         "data-gs-c": gsC("legend"),
         "data-gs": gs("src", "piechart", "piechart.tsx", "pie-chart", "box", "victory-container", "victory-legend"),
         name: "legend",
@@ -313,8 +335,13 @@ function PieChart(_ref) {
         labelComponent: (0, _jsxRuntime.jsx)(PieLegendLabel, {
           "data-gs": gs("src", "piechart", "piechart.tsx", "pie-chart", "box", "victory-container", "victory-legend", "pie-legend-label")
         })
-      })]
-    })
+      }) : (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {})]
+    }), customLegendRenderer && customLegendRenderer({
+      width: width,
+      height: legendHeight,
+      colorScale: _ChartPrimitives.chartUtils.DEFAULT_COLORS,
+      data: legend
+    })]
   });
 }
 

package/dist/es/PieChart/index.d.ts

@@ -1,3 +1,3 @@
 export { PieChart } from './PieChart';
-export type { PieChartData } from './PieChart';
+export type { PieChartData, PieChartProps } from './PieChart';
 //# sourceMappingURL=index.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "td-stylekit",
-  "version": "28.20.0",
+  "version": "28.21.0",
   "main": "dist/es/index.js",
   "module": "dist/es/index.js",
   "types": "dist/es/index.d.ts",