@scality/core-ui 0.180.0 → 0.181.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/components/chartlegend/ChartLegendWrapper.d.ts +2 -1
  2. package/dist/components/chartlegend/ChartLegendWrapper.d.ts.map +1 -1
  3. package/dist/components/chartlegend/ChartLegendWrapper.js +13 -3
  4. package/package.json +1 -1
  5. package/src/lib/components/chartlegend/ChartLegendWrapper.tsx +16 -2
  6. package/stories/BarChart/barchart.stories.tsx +19 -0
package/dist/components/chartlegend/ChartLegendWrapper.d.ts CHANGED
@@ -16,7 +16,8 @@ export type ChartLegendState = {
16
16
  export type ChartLegendWrapperProps = {
17
17
  children: ReactNode;
18
18
  colorSet: Record<string, ChartColors | string> | ((seriesNames: string[]) => Record<string, ChartColors | string>);
19
+ sortOrder?: 'alphabetical' | 'status' | ((a: string, b: string) => number);
19
20
  };
20
- export declare const ChartLegendWrapper: ({ children, colorSet, }: ChartLegendWrapperProps) => import("react/jsx-runtime").JSX.Element;
21
+ export declare const ChartLegendWrapper: ({ children, colorSet, sortOrder, }: ChartLegendWrapperProps) => import("react/jsx-runtime").JSX.Element;
21
22
  export declare const useChartLegend: () => ChartLegendState;
22
23
  //# sourceMappingURL=ChartLegendWrapper.d.ts.map
package/dist/components/chartlegend/ChartLegendWrapper.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ChartLegendWrapper.d.ts","sourceRoot":"","sources":["../../../src/lib/components/chartlegend/ChartLegendWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,SAAS,EAKV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,eAAO,MAAM,UAAU,QAAO,MAQ7B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,iBAAiB,EAAE,MAAM,EAAE,CAAC;IAC5B,mBAAmB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,sBAAsB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,kBAAkB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC;IAC1C,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACnD,aAAa,EAAE,MAAM,MAAM,EAAE,CAAC;IAC9B,iBAAiB,EAAE,MAAM,OAAO,CAAC;IACjC,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC5D,CAAC;AAIF,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EACJ,MAAM,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAAC,GACpC,CAAC,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,MAAM,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC;CACvE,CAAC;AAEF,eAAO,MAAM,kBAAkB,4BAG5B,uBAAuB,4CA0HzB,CAAC;AAEF,eAAO,MAAM,cAAc,wBAM1B,CAAC"}
1
+ {"version":3,"file":"ChartLegendWrapper.d.ts","sourceRoot":"","sources":["../../../src/lib/components/chartlegend/ChartLegendWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,SAAS,EAKV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,eAAO,MAAM,UAAU,QAAO,MAQ7B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,iBAAiB,EAAE,MAAM,EAAE,CAAC;IAC5B,mBAAmB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,sBAAsB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,kBAAkB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC;IAC1C,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACnD,aAAa,EAAE,MAAM,MAAM,EAAE,CAAC;IAC9B,iBAAiB,EAAE,MAAM,OAAO,CAAC;IACjC,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC5D,CAAC;AAIF,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EACJ,MAAM,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAAC,GACpC,CAAC,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,MAAM,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC;IACtE,SAAS,CAAC,EAAE,cAAc,GAAG,QAAQ,GAAG,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;CAC5E,CAAC;AAEF,eAAO,MAAM,kBAAkB,uCAI5B,uBAAuB,4CAsIzB,CAAC;AAEF,eAAO,MAAM,cAAc,wBAM1B,CAAC"}
package/dist/components/chartlegend/ChartLegendWrapper.js CHANGED
@@ -9,7 +9,7 @@ export const useChartId = () => {
9
9
  return idRef.current;
10
10
  };
11
11
  const ChartLegendContext = createContext(null);
12
- export const ChartLegendWrapper = ({ children, colorSet, }) => {
12
+ export const ChartLegendWrapper = ({ children, colorSet, sortOrder = 'alphabetical', }) => {
13
13
  const [registeredColorSets, setRegisteredColorSets] = useState({});
14
14
  const [internalColorSet, setInternalColorSet] = useState(() => {
15
15
  return typeof colorSet === 'function' ? {} : colorSet;
@@ -64,8 +64,18 @@ export const ChartLegendWrapper = ({ children, colorSet, }) => {
64
64
  return color;
65
65
  }, [internalColorSet]);
66
66
  const listResources = useCallback(() => {
67
- return Object.keys(internalColorSet).sort();
68
- }, [internalColorSet]);
67
+ const resources = Object.keys(internalColorSet);
68
+ if (sortOrder === 'alphabetical') {
69
+ return resources.sort((a, b) => a.localeCompare(b));
70
+ }
71
+ else if (sortOrder === 'status') {
72
+ return ['Success', 'Warning', 'Failed'].filter((status) => resources.includes(status));
73
+ }
74
+ else if (typeof sortOrder === 'function') {
75
+ return resources.sort(sortOrder);
76
+ }
77
+ return resources;
78
+ }, [internalColorSet, sortOrder]);
69
79
  const chartLegendState = useMemo(() => ({
70
80
  selectedResources,
71
81
  addSelectedResource,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scality/core-ui",
3
- "version": "0.180.0",
3
+ "version": "0.181.0",
4
4
  "description": "Scality common React component library",
5
5
  "author": "Scality Engineering",
6
6
  "license": "SEE LICENSE IN LICENSE",
package/src/lib/components/chartlegend/ChartLegendWrapper.tsx CHANGED
@@ -41,11 +41,13 @@ export type ChartLegendWrapperProps = {
41
41
  colorSet:
42
42
  | Record<string, ChartColors | string>
43
43
  | ((seriesNames: string[]) => Record<string, ChartColors | string>);
44
+ sortOrder?: 'alphabetical' | 'status' | ((a: string, b: string) => number);
44
45
  };
45
46
 
46
47
  export const ChartLegendWrapper = ({
47
48
  children,
48
49
  colorSet,
50
+ sortOrder = 'alphabetical',
49
51
  }: ChartLegendWrapperProps) => {
50
52
  const [registeredColorSets, setRegisteredColorSets] = useState<
51
53
  Record<string, string[]>
@@ -133,8 +135,20 @@ export const ChartLegendWrapper = ({
133
135
  );
134
136
 
135
137
  const listResources = useCallback(() => {
136
- return Object.keys(internalColorSet).sort();
137
- }, [internalColorSet]);
138
+ const resources = Object.keys(internalColorSet);
139
+
140
+ if (sortOrder === 'alphabetical') {
141
+ return resources.sort((a, b) => a.localeCompare(b));
142
+ } else if (sortOrder === 'status') {
143
+ return ['Success', 'Warning', 'Failed'].filter((status) =>
144
+ resources.includes(status),
145
+ );
146
+ } else if (typeof sortOrder === 'function') {
147
+ return resources.sort(sortOrder);
148
+ }
149
+
150
+ return resources;
151
+ }, [internalColorSet, sortOrder]);
138
152
 
139
153
  const chartLegendState = useMemo(
140
154
  () => ({
package/stories/BarChart/barchart.stories.tsx CHANGED
@@ -59,6 +59,7 @@ export const Playground: Story = {
59
59
  Success: theme.statusHealthy,
60
60
  Failed: theme.statusCritical,
61
61
  }}
62
+ sortOrder="status"
62
63
  >
63
64
  <Stack direction="vertical" gap="r16">
64
65
  <Barchart
@@ -123,6 +124,7 @@ export const Time7Days: Story = {
123
124
  Success: theme.statusHealthy,
124
125
  Failed: theme.statusCritical,
125
126
  }}
127
+ sortOrder="status"
126
128
  >
127
129
  <Stack direction="vertical" gap="r16">
128
130
  <Barchart
@@ -408,6 +410,7 @@ export const Stacked: Story = {
408
410
  Failed: theme.statusCritical,
409
411
  Warning: theme.statusWarning,
410
412
  }}
413
+ sortOrder="status"
411
414
  >
412
415
  <Stack direction="vertical" gap="r16">
413
416
  <Barchart
@@ -464,6 +467,7 @@ export const DefaultSort: Story = {
464
467
  Success: theme.statusHealthy,
465
468
  Failed: theme.statusCritical,
466
469
  }}
470
+ sortOrder="status"
467
471
  >
468
472
  <Barchart
469
473
  type={{ type: 'category' }}
@@ -542,6 +546,7 @@ export const WithCustomTooltip: Story = {
542
546
  Success: theme.statusHealthy,
543
547
  Failed: theme.statusCritical,
544
548
  }}
549
+ sortOrder="status"
545
550
  >
546
551
  <Stack direction="vertical" gap="r16">
547
552
  <Barchart
@@ -614,6 +619,14 @@ export const StatusColors: Story = {
614
619
  'Failed Requests': theme.statusCritical,
615
620
  'Warning Events': theme.statusWarning,
616
621
  }}
622
+ sortOrder={(a, b) => {
623
+ const statusOrder: Record<string, number> = {
624
+ 'Success Rate': 0,
625
+ 'Warning Events': 1,
626
+ 'Failed Requests': 2,
627
+ };
628
+ return statusOrder[a] - statusOrder[b];
629
+ }}
617
630
  >
618
631
  <Stack direction="vertical" gap="r16">
619
632
  <Barchart
@@ -668,6 +681,7 @@ export const LegendShapes: Story = {
668
681
  Failed: theme.statusCritical,
669
682
  Warning: theme.statusWarning,
670
683
  }}
684
+ sortOrder="status"
671
685
  >
672
686
  <Stack direction="vertical" gap="r16">
673
687
  <Barchart
@@ -685,6 +699,7 @@ export const LegendShapes: Story = {
685
699
  Failed: theme.statusCritical,
686
700
  Warning: theme.statusWarning,
687
701
  }}
702
+ sortOrder="status"
688
703
  >
689
704
  <Stack direction="vertical" gap="r16">
690
705
  <Barchart
@@ -740,6 +755,7 @@ export const BarchartsWithSingleLegend: Story = {
740
755
  Failed: theme.statusCritical,
741
756
  Warning: theme.statusWarning,
742
757
  }}
758
+ sortOrder="status"
743
759
  >
744
760
  <Barchart
745
761
  type={{ type: 'category' }}
@@ -770,6 +786,7 @@ export const ErrorState: Story = {
770
786
  Success: theme.statusHealthy,
771
787
  Failed: theme.statusCritical,
772
788
  }}
789
+ sortOrder="status"
773
790
  >
774
791
  <Barchart
775
792
  type={{ type: 'category' }}
@@ -821,6 +838,7 @@ export const StackedBarSort: Story = {
821
838
  Warning: theme.statusWarning,
822
839
  Failed: theme.statusCritical,
823
840
  }}
841
+ sortOrder="status"
824
842
  >
825
843
  <Barchart
826
844
  type={{ type: 'category' }}
@@ -896,6 +914,7 @@ export const CompleteExample: Story = {
896
914
  Success: 'lineColor1',
897
915
  Failed: 'lineColor2',
898
916
  }}
917
+ sortOrder="status"
899
918
  >
900
919
  <Barchart
901
920
  type={{ type: 'category' }}