@spaced-out/ui-design-system 0.4.15-beta.4 → 0.5.0

package/lib/components/Charts/ColumnChart/ColumnChart.stories.d.ts

@@ -0,0 +1,446 @@
+import * as React from 'react';
+import type { ColumnChartProps } from './';
+declare const _default: {
+    tags: string[];
+    title: string;
+    component: ({ isLoading, classNames, cardTitle, customExportOptions, series, drilldown, headerActions, hasEmptyData, emptyText, ...userOptions }: ColumnChartProps) => React.JSX.Element;
+    argTypes: {
+        isLoading: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        classNames: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        cardTitle: {
+            description: string;
+            control: {
+                type: string;
+            };
+            type: {
+                summary: string;
+            };
+        };
+        customExportOptions: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        series: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        legend: {
+            description: string;
+            control: {
+                type: string;
+            };
+        };
+        plotOptions: {
+            description: string;
+        };
+        xAxis: {
+            description: string;
+        };
+        yAxis: {
+            description: string;
+        };
+        headerActions: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        hasEmptyData: {
+            description: string;
+            control: {
+                type: string;
+            };
+        };
+        emptyText: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    parameters: {
+        docs: {
+            subtitle: string;
+            description: {
+                component: string;
+            };
+        };
+        storySource: {
+            componentPath: string;
+        };
+    };
+};
+export default _default;
+export declare const EmptyData: () => React.JSX.Element;
+export declare const _ColumnChart: {
+    (args: ColumnChartProps): React.JSX.Element;
+    args: {
+        classNames: {
+            wrapper: string;
+        };
+        cardTitle: string;
+        customExportOptions: {
+            key: string;
+            label: string;
+            format: string;
+        }[];
+        series: {
+            name: string;
+            data: {
+                name: string;
+                y: number;
+            }[];
+        }[];
+        xAxis: {
+            readonly title: {
+                readonly text: "Sourcing";
+            };
+        };
+        yAxis: {
+            readonly title: {
+                readonly text: "Amount Sourced";
+            };
+        };
+        legend: {
+            readonly enabled: true;
+            readonly shadow: false;
+        };
+    };
+};
+export declare const _ColumnChartWithEmptyData: {
+    (args: ColumnChartProps): React.JSX.Element;
+    args: {
+        classNames: {
+            wrapper: string;
+        };
+        cardTitle: string;
+        customExportOptions: {
+            key: string;
+            label: string;
+            format: string;
+        }[];
+        series: {
+            name: string;
+            data: {
+                name: string;
+                y: number;
+            }[];
+        }[];
+        xAxis: {
+            readonly title: {
+                readonly text: "Sourcing";
+            };
+        };
+        yAxis: {
+            readonly title: {
+                readonly text: "Amount Sourced";
+            };
+        };
+        legend: {
+            readonly enabled: true;
+            readonly shadow: false;
+        };
+        hasEmptyData: boolean;
+        emptyText: React.ReactElement<React.ComponentProps<typeof EmptyData>>;
+    };
+};
+export declare const _ColumnChartWithDrilldown: {
+    (args: ColumnChartProps): React.JSX.Element;
+    args: {
+        classNames: {
+            wrapper: string;
+        };
+        cardTitle: string;
+        customExportOptions: {
+            key: string;
+            label: string;
+            format: string;
+        }[];
+        series: ({
+            name: string;
+            data: {
+                name: string;
+                y: number;
+                drilldown: string;
+            }[];
+        } | {
+            name: string;
+            data: {
+                name: string;
+                y: number;
+            }[];
+        })[];
+        drilldown: {
+            readonly series: readonly [{
+                readonly id: "q1_23";
+                readonly name: "Inbound Sourced Drilldown";
+                readonly data: readonly [{
+                    readonly name: "Chatbot";
+                    readonly y: 4200;
+                }, {
+                    readonly name: "Discover";
+                    readonly y: 3400;
+                }, {
+                    readonly name: "Other";
+                    readonly y: 3600;
+                }];
+            }, {
+                readonly id: "q2_23";
+                readonly name: "Inbound Sourced Drilldown";
+                readonly data: readonly [{
+                    readonly name: "Chatbot";
+                    readonly y: 4200;
+                }, {
+                    readonly name: "Discover";
+                    readonly y: 3400;
+                }, {
+                    readonly name: "Other";
+                    readonly y: 3600;
+                }];
+            }, {
+                readonly id: "q3_23";
+                readonly name: "Outbound Sourced";
+                readonly data: readonly [{
+                    readonly name: "Chatbot";
+                    readonly y: 2200;
+                }, {
+                    readonly name: "Discover";
+                    readonly y: 1400;
+                }, {
+                    readonly name: "Other";
+                    readonly y: 3600;
+                }];
+            }, {
+                readonly id: "q4_23";
+                readonly name: "Outbound Sourced";
+                readonly data: readonly [{
+                    readonly name: "Chatbot";
+                    readonly y: 2200;
+                }, {
+                    readonly name: "Discover";
+                    readonly y: 1400;
+                }, {
+                    readonly name: "Other";
+                    readonly y: 3600;
+                }];
+            }];
+        };
+        yAxis: {
+            readonly title: {
+                readonly text: "Amount Sourced";
+            };
+        };
+        legend: {
+            readonly enabled: true;
+            readonly shadow: false;
+        };
+    };
+};
+export declare const _ColumnChartWithMultiLevelDrilldown: {
+    (args: ColumnChartProps): React.JSX.Element;
+    args: {
+        classNames: {
+            wrapper: string;
+        };
+        cardTitle: string;
+        customExportOptions: {
+            key: string;
+            label: string;
+            format: string;
+        }[];
+        series: ({
+            name: string;
+            data: {
+                name: string;
+                y: number;
+                drilldown: string;
+            }[];
+        } | {
+            name: string;
+            data: number[];
+        })[];
+        drilldown: {
+            readonly series: readonly [{
+                readonly name: "Jan Weekly Sales Data";
+                readonly id: "jan";
+                readonly data: readonly [{
+                    readonly name: "Week 1";
+                    readonly y: 50;
+                }, {
+                    readonly name: "Week 2";
+                    readonly y: 70;
+                }, {
+                    readonly name: "Week 3";
+                    readonly y: 60;
+                }, {
+                    readonly name: "Week 4";
+                    readonly y: 100;
+                    readonly drilldown: "daily";
+                }];
+            }, {
+                readonly name: "Feb Weekly Sales Data";
+                readonly id: "feb";
+                readonly data: readonly [{
+                    readonly name: "Week 5";
+                    readonly y: 60;
+                }, {
+                    readonly name: "Week 6";
+                    readonly y: 80;
+                }, {
+                    readonly name: "Week 7";
+                    readonly y: 70;
+                }, {
+                    readonly name: "Week 8";
+                    readonly y: 100;
+                    readonly drilldown: "daily";
+                }];
+            }, {
+                readonly name: "March Weekly Sales Data";
+                readonly id: "mar";
+                readonly data: readonly [{
+                    readonly name: "Week 9";
+                    readonly y: 70;
+                }, {
+                    readonly name: "Week 10";
+                    readonly y: 90;
+                }, {
+                    readonly name: "Week 11";
+                    readonly y: 80;
+                }, {
+                    readonly name: "Week 12";
+                    readonly y: 100;
+                    readonly drilldown: "daily";
+                }];
+            }, {
+                readonly name: "April Weekly Sales Data";
+                readonly id: "apr";
+                readonly data: readonly [{
+                    readonly name: "Week 13";
+                    readonly y: 80;
+                }, {
+                    readonly name: "Week 14";
+                    readonly y: 100;
+                    readonly drilldown: "daily";
+                }, {
+                    readonly name: "Week 15";
+                    readonly y: 90;
+                }, {
+                    readonly name: "Week 16";
+                    readonly y: 110;
+                }];
+            }, {
+                readonly name: "May Weekly Sales Data";
+                readonly id: "may";
+                readonly data: readonly [{
+                    readonly name: "Week 1";
+                    readonly y: 90;
+                }, {
+                    readonly name: "Week 2";
+                    readonly y: 110;
+                }, {
+                    readonly name: "Week 3";
+                    readonly y: 100;
+                    readonly drilldown: "daily";
+                }, {
+                    readonly name: "Week 4";
+                    readonly y: 120;
+                }];
+            }, {
+                readonly name: "June Weekly Sales Data";
+                readonly id: "jun";
+                readonly data: readonly [{
+                    readonly name: "Week 1";
+                    readonly y: 100;
+                    readonly drilldown: "daily";
+                }, {
+                    readonly name: "Week 2";
+                    readonly y: 120;
+                }, {
+                    readonly name: "Week 3";
+                    readonly y: 110;
+                }, {
+                    readonly name: "Week 4";
+                    readonly y: 130;
+                }];
+            }, {
+                readonly name: "Daily Sales Data";
+                readonly id: "daily";
+                readonly data: readonly [{
+                    readonly name: "Day 1";
+                    readonly y: 10;
+                }, {
+                    readonly name: "Day 2";
+                    readonly y: 15;
+                }, {
+                    readonly name: "Day 3";
+                    readonly y: 12;
+                }, {
+                    readonly name: "Day 4";
+                    readonly y: 18;
+                }, {
+                    readonly name: "Day 5";
+                    readonly y: 15;
+                }, {
+                    readonly name: "Day 6";
+                    readonly y: 11;
+                }, {
+                    readonly name: "Day 7";
+                    readonly y: 19;
+                }];
+            }];
+        };
+        yAxis: {
+            readonly title: {
+                readonly text: "Sales";
+            };
+        };
+        legend: {
+            readonly enabled: true;
+            readonly shadow: false;
+        };
+        plotOptions: {
+            readonly series: {
+                readonly cursor: "pointer";
+            };
+        };
+    };
+};
+//# sourceMappingURL=ColumnChart.stories.d.ts.map

package/lib/components/Charts/ColumnChart/ColumnChart.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnChart.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Charts/ColumnChart/ColumnChart.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMzC,wBA2NE;AA0CF,eAAO,MAAM,SAAS,yBAUrB,CAAC;AAOF,eAAO,MAAM,YAAY;WAAU,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAelD,CAAC;AAYF,eAAO,MAAM,yBAAyB;WAAU,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBA0BhC,KAAK,CAAC,YAAY,CAC9C,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,CACvC;;CAbF,CAAC;AAwFF,eAAO,MAAM,yBAAyB;WAAU,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAe/D,CAAC;AA4HF,eAAO,MAAM,mCAAmC;WAAU,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAezE,CAAC"}

package/lib/components/Charts/DonutChart/DonutChart.d.ts

@@ -1,16 +1,16 @@
 import * as React from 'react';
 import type { ChartOptions, Drilldown, LegendOptionsType, SeriesOptionsType } from '../../../types/charts';
 import type { ChartWrapperClassNames, ExportOptionType } from '../ChartWrapper';
-export type ClassNames = Readonly<((ChartWrapperClassNames) & {
+export type ClassNames = Readonly<ChartWrapperClassNames & {
     highChart?: string;
     subtitleClassNames?: SubtitleClassNames;
-})>;
+}>;
 export type SubtitleClassNames = {
     wrapper?: string;
     text?: string;
     subtext?: string;
 };
-export type DonutChartProps = ((ChartOptions) & {
+export type DonutChartProps = ChartOptions & {
     isLoading?: boolean;
     classNames?: ClassNames;
     cardTitle?: React.ReactNode;
@@ -23,6 +23,6 @@ export type DonutChartProps = ((ChartOptions) & {
     legend?: LegendOptionsType;
     hasEmptyData?: boolean;
     emptyText?: React.ReactNode;
-});
+};
 export declare const DonutChart: ({ isLoading, classNames, cardTitle, customExportOptions, headerActions, series, drilldown, legend, centerText, centerSubtext, hasEmptyData, emptyText, ...userOptions }: DonutChartProps) => React.JSX.Element;
 //# sourceMappingURL=DonutChart.d.ts.map

package/lib/components/Charts/DonutChart/DonutChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DonutChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Charts/DonutChart/DonutChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EACV,YAAY,EACZ,SAAS,EACT,iBAAiB,EACjB,iBAAiB,EAClB,MAAM,uBAAuB,CAAC;AAO/B,OAAO,KAAK,EACV,sBAAsB,EACtB,gBAAgB,EAAC,MAAM,iBAAiB,CAAC;AAS3C,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,GAAG;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;CACzC,CAAC,CAAC,CAAC;AAEJ,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,CAAC,CAAC,YAAY,CAAC,GAAG;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,mBAAmB,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;IACrD,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,CAAC,CAAC;AAEH,eAAO,MAAM,UAAU,GACrB,yKAcG,eAAe,sBAuFnB,CAAC"}
+{"version":3,"file":"DonutChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Charts/DonutChart/DonutChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EACV,YAAY,EACZ,SAAS,EACT,iBAAiB,EACjB,iBAAiB,EAClB,MAAM,uBAAuB,CAAC;AAO/B,OAAO,KAAK,EAAC,sBAAsB,EAAE,gBAAgB,EAAC,MAAM,iBAAiB,CAAC;AAO9E,MAAM,MAAM,UAAU,GAAG,QAAQ,CAC/B,sBAAsB,GAAG;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;CACzC,CACF,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,YAAY,GAAG;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,mBAAmB,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;IACrD,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,yKAcxB,eAAe,sBAwFjB,CAAC"}

package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts

@@ -0,0 +1,227 @@
+import * as React from 'react';
+import type { DonutChartProps } from './';
+declare const _default: {
+    tags: string[];
+    title: string;
+    component: ({ isLoading, classNames, cardTitle, customExportOptions, headerActions, series, drilldown, legend, centerText, centerSubtext, hasEmptyData, emptyText, ...userOptions }: DonutChartProps) => React.JSX.Element;
+    argTypes: {
+        isLoading: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        classNames: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        cardTitle: {
+            description: string;
+            control: {
+                type: string;
+            };
+            type: {
+                summary: string;
+            };
+        };
+        centerText: {
+            description: string;
+            control: {
+                type: string;
+            };
+        };
+        centerSubtext: {
+            description: string;
+            control: {
+                type: string;
+            };
+        };
+        customExportOptions: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        series: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        legend: {
+            description: string;
+            control: {
+                type: string;
+            };
+        };
+        headerActions: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        hasEmptyData: {
+            description: string;
+            control: {
+                type: string;
+            };
+        };
+        emptyText: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    parameters: {
+        docs: {
+            subtitle: string;
+            description: {
+                component: string;
+            };
+        };
+        storySource: {
+            componentPath: string;
+        };
+    };
+};
+export default _default;
+export declare const _DonutChart: {
+    (args: DonutChartProps): React.JSX.Element;
+    args: {
+        classNames: {
+            wrapper: string;
+            content: string;
+        };
+        cardTitle: string;
+        centerText: string;
+        centerSubtext: string;
+        customExportOptions: {
+            key: string;
+            label: string;
+            format: string;
+        }[];
+        series: {
+            name: string;
+            data: {
+                name: string;
+                y: number;
+            }[];
+        }[];
+        legend: {
+            readonly enabled: true;
+        };
+    };
+};
+declare const EmptyData: () => React.JSX.Element;
+export declare const _DonutChartWithEmptyData: {
+    (args: DonutChartProps): React.JSX.Element;
+    args: {
+        classNames: {
+            wrapper: string;
+            content: string;
+        };
+        cardTitle: string;
+        centerText: string;
+        centerSubtext: string;
+        customExportOptions: {
+            key: string;
+            label: string;
+            format: string;
+        }[];
+        series: {
+            name: string;
+            data: {
+                name: string;
+                y: number;
+            }[];
+        }[];
+        legend: {
+            readonly enabled: true;
+        };
+        hasEmptyData: boolean;
+        emptyText: React.ReactElement<React.ComponentProps<typeof EmptyData>>;
+    };
+};
+export declare const _DonutChartWithDrilldown: {
+    (args: DonutChartProps): React.JSX.Element;
+    args: {
+        classNames: {
+            wrapper: string;
+            content: string;
+        };
+        cardTitle: string;
+        centerText: string;
+        centerSubtext: string;
+        series: {
+            type: string;
+            name: string;
+            innerSize: string;
+            data: {
+                name: string;
+                y: number;
+                drilldown: string;
+            }[];
+        }[];
+        drilldown: {
+            readonly series: readonly [{
+                readonly id: "chrome";
+                readonly data: readonly [{
+                    readonly name: "Version 80";
+                    readonly y: 10;
+                }, {
+                    readonly name: "Version 81";
+                    readonly y: 15;
+                }];
+            }, {
+                readonly id: "firefox";
+                readonly data: readonly [{
+                    readonly name: "Version 75";
+                    readonly y: 8;
+                }, {
+                    readonly name: "Version 76";
+                    readonly y: 12;
+                }];
+            }, {
+                readonly id: "safari";
+                readonly data: readonly [{
+                    readonly name: "Version 12";
+                    readonly y: 5;
+                }, {
+                    readonly name: "Version 13";
+                    readonly y: 10;
+                }];
+            }];
+        };
+        legend: {
+            readonly enabled: false;
+        };
+    };
+};
+//# sourceMappingURL=DonutChart.stories.d.ts.map