@ssa-ui-kit/core 2.2.2 → 2.3.0

package/dist/components/Charts/TreeMapChart/TreeMapChart.d.ts

@@ -0,0 +1,23 @@
+import { ResponsiveTreeMap } from '@nivo/treemap';
+import React from 'react';
+import { WidgetCardProps } from '../../WidgetCard';
+export type TreeNode = {
+    name: string;
+    value?: number;
+    children?: TreeNode[];
+};
+export type TreeMapChartFeature = 'header' | 'fullscreenMode';
+type NivoTreeMapChartProps = React.ComponentProps<typeof ResponsiveTreeMap>;
+export interface TreeMapChartProps extends Omit<NivoTreeMapChartProps, 'data'> {
+    data: TreeNode;
+    title?: string;
+    fullScreen?: boolean;
+    features?: TreeMapChartFeature[];
+    widgetCardProps?: WidgetCardProps;
+}
+export declare const TreeMapChartComponent: ({ data, title, widgetCardProps, features, ...treeMapProps }: TreeMapChartProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TreeMapChart: {
+    (props: TreeMapChartProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/components/Charts/TreeMapChart/TreeMapChartHeader.d.ts

@@ -0,0 +1,8 @@
+import { TreeMapChartFeature } from './TreeMapChart';
+export declare const FullScreenButton: import("@emotion/styled").StyledComponent<import("../../Button/types").ButtonProps & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export interface TreeMapChartHeaderProps {
+    features: TreeMapChartFeature[];
+}
+export declare const TreeMapChartHeader: ({ features }: TreeMapChartHeaderProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Charts/TreeMapChart/TreeMapChartTooltip.d.ts

@@ -0,0 +1,2 @@
+import { TooltipProps } from '@nivo/treemap';
+export declare const TreeMapChartTooltip: ({ node }: TooltipProps<object>) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Charts/TreeMapChart/index.d.ts

@@ -0,0 +1 @@
+export * from './TreeMapChart';

package/dist/components/Charts/index.d.ts

@@ -1,5 +1,6 @@
 export * from './PieChart';
 export * from './SegmentedPieChart';
 export * from './BarLineComplexChart';
+export * from './TreeMapChart';
 export * from './common';
 export * from './hooks';

package/dist/components/WidgetCard/WithWidgetCard.d.ts

@@ -1,4 +1,11 @@
-import { PieChartProps } from '../Charts/PieChart';
-export declare const WithWidgetCard: ({ children, features, cardProps, }: {
+import React from 'react';
+import { WidgetCardProps } from './types';
+type Has<T extends string, U extends string> = Exclude<U, T> extends never ? true : false;
+type MustIncludeHeader<T extends readonly string[]> = Has<T[number], 'header'> extends true ? T : never;
+export type WithWidgetCardProps<F extends string[]> = {
     children: React.ReactNode;
-} & Pick<PieChartProps, "features" | "cardProps">) => string | number | boolean | Iterable<import("react").ReactNode> | import("@emotion/react/jsx-runtime").JSX.Element | null | undefined;
+    features?: MustIncludeHeader<F>;
+    cardProps?: WidgetCardProps;
+};
+export declare function WithWidgetCard<F extends string[]>({ children, features, cardProps, }: WithWidgetCardProps<F>): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/index.js

@@ -199,6 +199,8 @@ __webpack_require__.d(__webpack_exports__, {
   TooltipTrigger: () => (/* reexport */ TooltipTrigger_TooltipTrigger),
   TranslationContext: () => (/* reexport */ TranslationContext),
   TranslationProvider: () => (/* reexport */ TranslationProvider),
+  TreeMapChart: () => (/* reexport */ TreeMapChart),
+  TreeMapChartComponent: () => (/* reexport */ TreeMapChartComponent),
   Typeahead: () => (/* reexport */ Typeahead),
   TypeaheadItemIcon: () => (/* reexport */ TypeaheadItemIcon),
   TypeaheadItemImage: () => (/* reexport */ TypeaheadItemImage),
@@ -1111,6 +1113,8 @@ const main = {
     // #4178e1
     blue20: 'rgba(65, 120, 225, 0.2)',
     // #4178e1
+    blueCool: 'rgba(108, 148, 247, 1)',
+    // #6c94f7
     blueDark: 'rgba(36, 101, 227, 1)',
     // #2465e3
     blueLightDarker: 'rgba(127, 159, 221)',
@@ -1157,6 +1161,8 @@ const main = {
     //#487DE1
     blueRoyal12: 'rgba(72, 125, 225, 0.12)',
     //#487DE1
+    cyanTeal: 'rgba(85, 214, 210, 1)',
+    //#55D6D2
     dangerShades300: 'rgb(253, 128, 122)',
     //#FD807A
     dangerShades500: 'rgb(223, 90, 96)',
@@ -5891,14 +5897,21 @@ const WidgetCard = ({
 ;// ./src/components/WidgetCard/WithWidgetCard.tsx
 
 
-const WithWidgetCard = ({
+
+// `Has<T, U>` = `true` if every string in `U` also appears in `T`.
+
+function WithWidgetCard({
   children,
   features = [],
   cardProps = {}
-}) => features && features.includes('header') ? (0,jsx_runtime_namespaceObject.jsx)(WidgetCard, {
-  ...cardProps,
-  children: children
-}) : children;
+}) {
+  return features && features.includes('header') ? (0,jsx_runtime_namespaceObject.jsx)(WidgetCard, {
+    ...cardProps,
+    children: children
+  }) : (0,jsx_runtime_namespaceObject.jsx)(jsx_runtime_namespaceObject.Fragment, {
+    children: children
+  });
+}
 ;// ./src/components/Charts/PieChart/PieChartBases.tsx
 
 function PieChartBases_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
@@ -13038,8 +13051,8 @@ const WithPagination = Component => {
 
 ;// ./src/components/Charts/PieChart/colorPalettes.ts
 const getBalancePalette = theme => {
-  const legendColorNames = ['yellow', 'blue', 'green', 'yellowWarm', 'blueLight', 'turquoise', 'pink', 'purple', '#6C94F7', '#55D6D2'];
-  const pieChartColors = [theme.colors.yellow, theme.colors.blue, theme.colors.green, theme.colors.yellowLighter, theme.colors.blueLight, theme.colors.turquoise, theme.colors.pink, theme.colors.purple, '#6C94F7', '#55D6D2'];
+  const legendColorNames = ['yellow', 'blue', 'green', 'yellowWarm', 'blueLight', 'turquoise', 'pink', 'purple', 'blueCool', 'cyanTeal'];
+  const pieChartColors = [theme.colors.yellow, theme.colors.blue, theme.colors.green, theme.colors.yellowLighter, theme.colors.blueLight, theme.colors.turquoise, theme.colors.pink, theme.colors.purple, theme.colors.blueCool, theme.colors.cyanTeal];
   return {
     legendColorNames,
     pieChartColors
@@ -14222,6 +14235,149 @@ const BarLineComplexChart = WithFullscreenMode(BarLineComplexChartComponent);
 ;// ./src/components/Charts/BarLineComplexChart/index.ts
 
 
+;// external "@nivo/treemap"
+const treemap_namespaceObject = require("@nivo/treemap");
+;// ./src/components/Charts/TreeMapChart/TreeMapChartHeader.tsx
+
+function TreeMapChartHeader_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+
+
+
+const FullScreenButton = /*#__PURE__*/base_default()(Button_Button,  true ? {
+  target: "e1nxcyi20"
+} : 0)("height:auto;padding:0;background:none;box-shadow:none;&:hover,&:focus{background:none;box-shadow:none;&::before{display:none;}}&:hover{svg path{fill:", ({
+  theme
+}) => theme.colors.greyDarker, ";}}" + ( true ? "" : 0));
+var TreeMapChartHeader_ref =  true ? {
+  name: "1pqzlpx",
+  styles: "width:auto;margin-left:auto"
+} : 0;
+var TreeMapChartHeader_ref2 =  true ? {
+  name: "e0dnmk",
+  styles: "cursor:pointer"
+} : 0;
+const TreeMapChartHeader = ({
+  features
+}) => {
+  const {
+    isFullscreenMode,
+    toggleFullscreenMode
+  } = useFullscreenMode();
+  const theme = (0,react_namespaceObject.useTheme)();
+  return (0,jsx_runtime_namespaceObject.jsx)(Wrapper_Wrapper, {
+    css: TreeMapChartHeader_ref,
+    children: features.includes('fullscreenMode') && (0,jsx_runtime_namespaceObject.jsx)(FullScreenButton, {
+      variant: "tertiary",
+      onClick: toggleFullscreenMode,
+      children: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+        name: isFullscreenMode ? 'cross' : 'maximize',
+        css: TreeMapChartHeader_ref2,
+        tooltip: isFullscreenMode ? 'Close' : 'Maximize',
+        size: 18,
+        color: theme.colors.greyFilterIcon
+      })
+    })
+  });
+};
+;// ./src/components/Charts/TreeMapChart/TreeMapChartTooltip.tsx
+
+function TreeMapChartTooltip_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+const TreeMapChartTooltip_Tooltip = /*#__PURE__*/base_default()("div",  true ? {
+  target: "eikatys0"
+} : 0)("background-color:", ({
+  theme
+}) => theme.colors.white, ";border:1px solid ", ({
+  theme
+}) => theme.colors.green20, ";border-radius:4px;font-size:12px;font-weight:500;padding:4px 8px;display:flex;gap:5px;" + ( true ? "" : 0));
+var TreeMapChartTooltip_ref =  true ? {
+  name: "1j389vi",
+  styles: "font-weight:700"
+} : 0;
+const TreeMapChartTooltip = ({
+  node
+}) => {
+  return (0,jsx_runtime_namespaceObject.jsxs)(TreeMapChartTooltip_Tooltip, {
+    children: [(0,jsx_runtime_namespaceObject.jsx)("span", {
+      children: node.id
+    }), (0,jsx_runtime_namespaceObject.jsx)("span", {
+      css: TreeMapChartTooltip_ref,
+      children: node.formattedValue
+    })]
+  });
+};
+;// ./src/components/Charts/TreeMapChart/TreeMapChart.tsx
+function TreeMapChart_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+
+
+
+
+
+
+
+var TreeMapChart_ref =  true ? {
+  name: "1qkt16r",
+  styles: "position:relative;height:100%;width:100%"
+} : 0;
+var TreeMapChart_ref2 =  true ? {
+  name: "19s8nj4",
+  styles: "position:absolute;width:100%;height:100%"
+} : 0;
+const TreeMapChartComponent = ({
+  data,
+  title,
+  widgetCardProps,
+  features = [],
+  ...treeMapProps
+}) => {
+  const theme = (0,react_namespaceObject.useTheme)();
+  const colors = [theme.colors.purple, theme.colors.blue, theme.colors.blueLight, theme.colors.turquoise, theme.colors.green, theme.colors.yellowLighter, theme.colors.yellow, theme.colors.pink, theme.colors.blueCool, theme.colors.cyanTeal];
+  return (0,jsx_runtime_namespaceObject.jsx)(WithWidgetCard, {
+    features: features,
+    cardProps: {
+      title,
+      headerContent: (0,jsx_runtime_namespaceObject.jsx)(TreeMapChartHeader, {
+        features: features
+      }),
+      ...widgetCardProps
+    },
+    children: (0,jsx_runtime_namespaceObject.jsx)("div", {
+      css: TreeMapChart_ref,
+      children: (0,jsx_runtime_namespaceObject.jsx)("div", {
+        css: TreeMapChart_ref2,
+        children: (0,jsx_runtime_namespaceObject.jsx)(treemap_namespaceObject.ResponsiveTreeMap, {
+          borderWidth: 0,
+          colors: colors,
+          data: data,
+          identity: "name",
+          innerPadding: 4,
+          label: node => `${node.id} (${node.formattedValue})`,
+          labelSkipSize: 10,
+          labelTextColor: theme.colors.white,
+          parentLabelTextColor: theme.colors.white,
+          leavesOnly: true,
+          nodeOpacity: 1,
+          theme: {
+            labels: {
+              text: {
+                fontSize: 14,
+                fontWeight: 600
+              }
+            }
+          },
+          tooltip: TreeMapChartTooltip,
+          value: "value",
+          ...treeMapProps
+        })
+      })
+    })
+  });
+};
+const TreeMapChart = WithFullscreenMode(TreeMapChartComponent);
+;// ./src/components/Charts/TreeMapChart/index.ts
+
 ;// ./src/components/Charts/common/index.ts
 
 ;// ./src/components/Charts/hooks/index.ts
@@ -14232,6 +14388,7 @@ const BarLineComplexChart = WithFullscreenMode(BarLineComplexChartComponent);
 
 
 
+
 ;// ./src/components/Popover/hooks/index.ts