td-stylekit 28.19.0 → 28.21.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [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)
+
+
+### Features
+
+* **CON-12768:** Add an icon for inviting users ([#1460](https://github.com/treasure-data/td-stylekit/issues/1460)) ([976c541](https://github.com/treasure-data/td-stylekit/commit/976c541))
+
 # [28.19.0](https://github.com/treasure-data/td-stylekit/compare/v28.18.0...v28.19.0) (2023-04-13)
 
 

package/dist/es/Icon/staticTypes.d.ts

@@ -522,6 +522,8 @@ export type IconTypes = {
     IdServiceDraftIcon: React.ComponentType<JSX.IntrinsicElements['svg']>;
     Integration: React.ComponentType<JSX.IntrinsicElements['svg']>;
     IntegrationIcon: React.ComponentType<JSX.IntrinsicElements['svg']>;
+    InviteUser: React.ComponentType<JSX.IntrinsicElements['svg']>;
+    InviteUserIcon: React.ComponentType<JSX.IntrinsicElements['svg']>;
     Journey: React.ComponentType<JSX.IntrinsicElements['svg']>;
     JourneyIcon: React.ComponentType<JSX.IntrinsicElements['svg']>;
     JourneyDraft: React.ComponentType<JSX.IntrinsicElements['svg']>;

package/dist/es/Icon/types.js

@@ -1035,6 +1035,9 @@ React.createElement("path", {
 }),Integration: /*#__PURE__*/
 React.createElement("path", {
   d: "M18.627 5.373a4.686 4.686 0 00-6.627 0l-1.506 1.506a.682.682 0 000 .964l.843.843-1.218 1.219a.937.937 0 101.325 1.325l1.219-1.218 1.325 1.325-1.218 1.219a.937.937 0 101.325 1.325l1.219-1.218.843.843a.682.682 0 00.964 0L18.627 12a4.686 4.686 0 000-6.627zM5.373 18.627a4.686 4.686 0 006.627 0l1.506-1.506a.682.682 0 000-.964l-5.663-5.663a.682.682 0 00-.964 0L5.373 12a4.686 4.686 0 000 6.627z"
+}),InviteUser: /*#__PURE__*/
+React.createElement("path", {
+  d: "M14.874 7.923a3.817 3.817 0 10-7.635 0v.636a3.817 3.817 0 107.635 0v-.636zM11.057 14.166c.473 0 .972.051 1.476.144a4.674 4.674 0 00-.59 2.28c0 .774.187 1.505.519 2.149h-7.24c-.954 0-1.508-1.095-.927-1.852.941-1.223 4.213-2.721 6.762-2.721zM16.638 13.286a1 1 0 011 1v1.304h1.304a1 1 0 110 2h-1.304v1.305a1 1 0 11-2 0V17.59h-1.305a1 1 0 110-2h1.305v-1.304a1 1 0 011-1z"
 }),Jobs: /*#__PURE__*/
 React.createElement("path", {
   d: "M2.11 6.688c0-2.015 1.426-3.89 3.461-3.89H18.43c2.035 0 3.461 1.875 3.461 3.89 0 2.014-1.426 3.89-3.461 3.89H5.57c-2.035 0-3.461-1.876-3.461-3.89zm16.319 2.11H16v-4.22h2.429c.804 0 1.68.81 1.68 2.11 0 1.298-.876 2.11-1.68 2.11zM2.11 17.313c0-2.015 1.426-3.89 3.461-3.89H18.43c2.035 0 3.461 1.875 3.461 3.89 0 2.014-1.426 3.89-3.461 3.89H5.57c-2.035 0-3.461-1.876-3.461-3.89zm16.319 2.11H9.5v-4.22h8.929c.804 0 1.68.81 1.68 2.11 0 1.298-.876 2.11-1.68 2.11z",

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.19.0",
+  "version": "28.21.0",
   "main": "dist/es/index.js",
   "module": "dist/es/index.js",
   "types": "dist/es/index.d.ts",