@auth0/quantum-charts 0.2.1 → 0.3.2

package/bar-chart/index.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { IBaseChartProps } from '../common/chart';
 export interface IBarChartProps<DataType = unknown> extends IBaseChartProps<DataType> {
     layout?: 'horizontal' | 'vertical';
     isStacked?: boolean;
 }
-export declare function BarChart<DataType = unknown>(props: IBarChartProps<DataType>): JSX.Element;
+export declare function BarChart<DataType = unknown>(props: IBarChartProps<DataType>): React.JSX.Element;

package/chart-card/index.d.ts

@@ -4,4 +4,4 @@ export interface IChartCardProps extends IChartSummaryProps {
     children?: React.ReactChild;
     height?: number | string;
 }
-export declare function ChartCard(props: IChartCardProps): JSX.Element;
+export declare function ChartCard(props: IChartCardProps): React.JSX.Element;

package/chart-card/index.js

@@ -28,9 +28,9 @@ var quantum_product_1 = require("@auth0/quantum-product");
 var React = __importStar(require("react"));
 var chart_summary_1 = require("../chart-summary");
 function ChartCard(props) {
-    var children = props.children, title = props.title, value = props.value, dataTable = props.dataTable, helperText = props.helperText, label = props.label, height = props.height;
+    var children = props.children, title = props.title, value = props.value, dataTable = props.dataTable, helperText = props.helperText, label = props.label, height = props.height, headerAction = props.headerAction;
     return (React.createElement(quantum_product_1.Card, { sx: { height: height, padding: 3 } },
-        React.createElement(chart_summary_1.ChartSummary, { title: title, value: value, dataTable: dataTable, helperText: helperText, label: label }),
+        React.createElement(chart_summary_1.ChartSummary, { title: title, value: value, dataTable: dataTable, helperText: helperText, label: label, headerAction: headerAction }),
         children));
 }
 exports.ChartCard = ChartCard;

package/chart-summary/data-table-chart.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import * as React from 'react';
 export interface IDataTableChartProps {
     title?: string;
     isOpen: boolean;
     toggleIsOpen: () => void;
     data: any;
 }
-export declare function DataTableChart(props: IDataTableChartProps): JSX.Element;
+export declare function DataTableChart(props: IDataTableChartProps): React.JSX.Element;

package/chart-summary/data-table-chart.js

@@ -102,16 +102,18 @@ function DataTableChart(props) {
                 React.createElement(quantum_product_1.Box, null, isDonut ? (React.createElement(quantum_product_1.DataTable, { items: data, columns: [
                         { field: 'name', title: 'Group' },
                         { title: 'value', render: function (_a) {
+                                var _b;
                                 var item = _a.item;
-                                return item.value || 'N/A';
+                                return (_b = item.value) !== null && _b !== void 0 ? _b : 'N/A';
                             } },
                     ] })) : (Object.values(groups).map(function (item, index) {
-                    return (React.createElement(quantum_product_1.TabPanel, { key: index, value: item[index].group },
+                    return (React.createElement(quantum_product_1.TabPanel, { key: index, value: item[0].group },
                         React.createElement(quantum_product_1.DataTable, { items: item, columns: [
                                 { field: 'group', title: 'Group' },
                                 { title: 'value', render: function (_a) {
+                                        var _b;
                                         var item = _a.item;
-                                        return item.value || 'N/A';
+                                        return (_b = item.value) !== null && _b !== void 0 ? _b : 'N/A';
                                     } },
                                 {
                                     title: hasKey ? 'key' : 'date',

package/chart-summary/index.d.ts

@@ -6,5 +6,6 @@ export interface IChartSummaryProps {
     /** Renders help icon with tooltip as passed value **/
     helperText?: React.ReactNode;
     dataTable?: any;
+    headerAction?: React.ReactElement;
 }
-export declare function ChartSummary(props: IChartSummaryProps): JSX.Element;
+export declare function ChartSummary(props: IChartSummaryProps): React.JSX.Element;

package/chart-summary/index.js

@@ -55,7 +55,7 @@ var Aggregate = (0, quantum_product_1.styled)('h4')(templateObject_1 || (templat
     return theme.typography.h4.fontSize;
 });
 function ChartSummary(props) {
-    var title = props.title, value = props.value, helperText = props.helperText, label = props.label, dataTable = props.dataTable;
+    var title = props.title, value = props.value, helperText = props.helperText, label = props.label, dataTable = props.dataTable, headerAction = props.headerAction;
     var _a = __read(React.useState(false), 2), isOpen = _a[0], setIsOpen = _a[1];
     var toggleIsOpen = function () {
         setIsOpen(function (prev) { return !prev; });
@@ -73,8 +73,11 @@ function ChartSummary(props) {
                                     color: 'textSecondary',
                                 } },
                                 React.createElement(quantum_product_1.HelpCircleIcon, { size: "16" })))))),
-                dataTable && dataTable[0] && (React.createElement(quantum_product_1.IconButton, { label: "List button", onClick: function () { return setIsOpen(true); } },
-                    React.createElement(quantum_product_1.ListIcon, null)))), labelTypographyProps: { variant: 'subtitle1' }, description: React.createElement(quantum_product_1.StackLayout, { gutter: 1 },
+                React.createElement(quantum_product_1.StackLayout, { gutter: 1 },
+                    dataTable && dataTable[0] && (React.createElement(quantum_product_1.StackLayoutItem, null,
+                        React.createElement(quantum_product_1.IconButton, { label: "List button", onClick: function () { return setIsOpen(true); } },
+                            React.createElement(quantum_product_1.ListIcon, null)))),
+                    headerAction && (React.createElement(quantum_product_1.StackLayoutItem, { sx: { justifyContent: 'flex-end', display: 'flex', width: '100', flex: 1 } }, headerAction)))), labelTypographyProps: { variant: 'subtitle1' }, description: React.createElement(quantum_product_1.StackLayout, { gutter: 1 },
                 React.createElement(Aggregate, null, value),
                 label) }),
         dataTable && dataTable[0] && (React.createElement(data_table_chart_1.DataTableChart, { title: title, isOpen: isOpen, toggleIsOpen: toggleIsOpen, data: dataTable }))));

package/common/chart.d.ts

@@ -1,14 +1,14 @@
 /// <reference types="react" />
 import { TooltipProps } from 'recharts';
 import { IChartCardProps } from '../chart-card';
-export declare type ScaleType = 'date' | 'datetime' | 'label' | 'number';
+export type ScaleType = 'date' | 'datetime' | 'label' | 'number';
 export interface ICustomTooltipProps extends TooltipProps<number, string> {
     scaleType?: 'datetime' | 'date';
 }
 export interface ILegendOptions {
     enabled?: boolean;
 }
-export declare type IChartDataPoint<DataType = unknown> = {
+export type IChartDataPoint<DataType = unknown> = {
     group: string;
     value?: number;
     key?: string;
@@ -27,7 +27,7 @@ export interface IBaseChartProps<DataType = unknown> extends IChartCardProps {
     legend?: ILegendOptions;
     color?: 'categorical' | 'sequential';
 }
-export declare type IDonutChartDataPoint<DataType = unknown> = {
+export type IDonutChartDataPoint<DataType = unknown> = {
     name: string;
     value?: number;
 } & DataType;

package/common/custom-legend.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare const CustomLegend: (props: any) => JSX.Element;
+import * as React from 'react';
+export declare const CustomLegend: (props: any) => React.JSX.Element;

package/common/custom-tooltip.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { ICustomTooltipProps } from './chart';
-declare const CustomTooltip: (props: ICustomTooltipProps) => JSX.Element | null;
+declare const CustomTooltip: (props: ICustomTooltipProps) => React.JSX.Element | null;
 export default CustomTooltip;

package/compare-aggregate/compare-aggregate.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { DeltaDirection, DeltaDisplayType } from '../delta';
 export interface ICompareAggregateProps {
     /** Current Value **/
@@ -16,4 +16,4 @@ export interface ICompareAggregateProps {
       **/
     direction?: DeltaDirection;
 }
-export declare function CompareAggregate(props: ICompareAggregateProps): JSX.Element;
+export declare function CompareAggregate(props: ICompareAggregateProps): React.JSX.Element;

package/delta/delta.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-export declare type DeltaDirection = 'upIsGood' | 'upIsBad' | 'neutral';
-export declare type DeltaDisplayType = 'percent' | 'number';
-export declare type DeltaEmphasis = 'bad' | 'good' | 'neutral';
+export type DeltaDirection = 'upIsGood' | 'upIsBad' | 'neutral';
+export type DeltaDisplayType = 'percent' | 'number';
+export type DeltaEmphasis = 'bad' | 'good' | 'neutral';
 export interface IDeltaProps {
     value: number;
     comparedValue: number;

package/donut-chart/center.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare type CenterProps = {
+type CenterProps = {
     data: any;
     activeIndex?: number;
     displayType: 'absolute' | 'percent';

package/donut-chart/decoupled-legend.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { IDonutChartDataPoint } from '../common/chart';
-export declare type IDecoupledLegendProps<DataType = unknown> = {
+export type IDecoupledLegendProps<DataType = unknown> = {
     data: IDonutChartDataPoint<DataType>[];
     activeIndex?: number;
     setActiveIndex: (index: number | undefined) => void;
     color?: 'categorical' | 'sequential';
 };
-declare function DecoupledLegend<DataType = unknown>(props: IDecoupledLegendProps<DataType>): JSX.Element;
+declare function DecoupledLegend<DataType = unknown>(props: IDecoupledLegendProps<DataType>): React.JSX.Element;
 export default DecoupledLegend;

package/donut-chart/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { IChartCardProps } from '../chart-card';
 import { IDonutChartDataPoint } from '../common/chart';
 interface IDonutChartProps<DataType = unknown> extends IChartCardProps {
@@ -8,5 +8,5 @@ interface IDonutChartProps<DataType = unknown> extends IChartCardProps {
     color?: 'categorical' | 'sequential';
     height?: number | string;
 }
-export declare function DonutChart(props: IDonutChartProps): JSX.Element;
+export declare function DonutChart(props: IDonutChartProps): React.JSX.Element;
 export {};

package/esm/chart-card/index.js

@@ -2,8 +2,8 @@ import { Card } from '@auth0/quantum-product';
 import * as React from 'react';
 import { ChartSummary } from '../chart-summary';
 export function ChartCard(props) {
-    var children = props.children, title = props.title, value = props.value, dataTable = props.dataTable, helperText = props.helperText, label = props.label, height = props.height;
+    var children = props.children, title = props.title, value = props.value, dataTable = props.dataTable, helperText = props.helperText, label = props.label, height = props.height, headerAction = props.headerAction;
     return (React.createElement(Card, { sx: { height: height, padding: 3 } },
-        React.createElement(ChartSummary, { title: title, value: value, dataTable: dataTable, helperText: helperText, label: label }),
+        React.createElement(ChartSummary, { title: title, value: value, dataTable: dataTable, helperText: helperText, label: label, headerAction: headerAction }),
         children));
 }

package/esm/chart-summary/data-table-chart.js

@@ -73,16 +73,18 @@ export function DataTableChart(props) {
                 React.createElement(Box, null, isDonut ? (React.createElement(DataTable, { items: data, columns: [
                         { field: 'name', title: 'Group' },
                         { title: 'value', render: function (_a) {
+                                var _b;
                                 var item = _a.item;
-                                return item.value || 'N/A';
+                                return (_b = item.value) !== null && _b !== void 0 ? _b : 'N/A';
                             } },
                     ] })) : (Object.values(groups).map(function (item, index) {
-                    return (React.createElement(TabPanel, { key: index, value: item[index].group },
+                    return (React.createElement(TabPanel, { key: index, value: item[0].group },
                         React.createElement(DataTable, { items: item, columns: [
                                 { field: 'group', title: 'Group' },
                                 { title: 'value', render: function (_a) {
+                                        var _b;
                                         var item = _a.item;
-                                        return item.value || 'N/A';
+                                        return (_b = item.value) !== null && _b !== void 0 ? _b : 'N/A';
                                     } },
                                 {
                                     title: hasKey ? 'key' : 'date',

package/esm/chart-summary/index.js

@@ -29,7 +29,7 @@ var Aggregate = styled('h4')(templateObject_1 || (templateObject_1 = __makeTempl
     return theme.typography.h4.fontSize;
 });
 export function ChartSummary(props) {
-    var title = props.title, value = props.value, helperText = props.helperText, label = props.label, dataTable = props.dataTable;
+    var title = props.title, value = props.value, helperText = props.helperText, label = props.label, dataTable = props.dataTable, headerAction = props.headerAction;
     var _a = __read(React.useState(false), 2), isOpen = _a[0], setIsOpen = _a[1];
     var toggleIsOpen = function () {
         setIsOpen(function (prev) { return !prev; });
@@ -47,8 +47,11 @@ export function ChartSummary(props) {
                                     color: 'textSecondary',
                                 } },
                                 React.createElement(HelpCircleIcon, { size: "16" })))))),
-                dataTable && dataTable[0] && (React.createElement(IconButton, { label: "List button", onClick: function () { return setIsOpen(true); } },
-                    React.createElement(ListIcon, null)))), labelTypographyProps: { variant: 'subtitle1' }, description: React.createElement(StackLayout, { gutter: 1 },
+                React.createElement(StackLayout, { gutter: 1 },
+                    dataTable && dataTable[0] && (React.createElement(StackLayoutItem, null,
+                        React.createElement(IconButton, { label: "List button", onClick: function () { return setIsOpen(true); } },
+                            React.createElement(ListIcon, null)))),
+                    headerAction && (React.createElement(StackLayoutItem, { sx: { justifyContent: 'flex-end', display: 'flex', width: '100', flex: 1 } }, headerAction)))), labelTypographyProps: { variant: 'subtitle1' }, description: React.createElement(StackLayout, { gutter: 1 },
                 React.createElement(Aggregate, null, value),
                 label) }),
         dataTable && dataTable[0] && (React.createElement(DataTableChart, { title: title, isOpen: isOpen, toggleIsOpen: toggleIsOpen, data: dataTable }))));

package/esm/line-chart/index.js

@@ -36,7 +36,7 @@ import { ChartCard } from '../chart-card';
 import { tickFormatter } from '../common/chart';
 import { CustomLegend } from '../common/custom-legend';
 export function LineChart(props) {
-    var _a = props, data = _a.data, leftAxis = _a.leftAxis, bottomAxis = _a.bottomAxis, _b = _a.height, height = _b === void 0 ? 300 : _b, title = _a.title, value = _a.value, label = _a.label, helperText = _a.helperText, _c = _a.legend, legend = _c === void 0 ? true : _c, syncId = _a.syncId, _d = _a.color, color = _d === void 0 ? 'categorical' : _d;
+    var _a = props, data = _a.data, leftAxis = _a.leftAxis, bottomAxis = _a.bottomAxis, _b = _a.height, height = _b === void 0 ? 300 : _b, title = _a.title, value = _a.value, label = _a.label, helperText = _a.helperText, _c = _a.legend, legend = _c === void 0 ? true : _c, syncId = _a.syncId, _d = _a.color, color = _d === void 0 ? 'categorical' : _d, headerAction = _a.headerAction;
     var theme = useTheme();
     // Function to know how many lines we need based of how much different group values are.
     var groups = _.uniqBy(data, 'group').map(function (item) { return item.group; });
@@ -77,7 +77,7 @@ export function LineChart(props) {
             _b[entry.group] = entry[leftAxisDataKey],
             _b;
     });
-    return (React.createElement(ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText },
+    return (React.createElement(ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, headerAction: headerAction },
         React.createElement(ResponsiveContainer, { width: '100%', height: height }, data.length ? (React.createElement(RechartsLineChart, { data: Object.values(entries), height: height, width: 500, syncId: syncId, margin: {
                 top: 24,
                 right: 10,

package/line-chart/custom-active-dot.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { DotProps } from 'recharts';
-declare const CustomActiveDot: (onMouseOver?: DotProps['onMouseOver']) => (props: Omit<DotProps, 'ref'>) => JSX.Element;
+declare const CustomActiveDot: (onMouseOver?: DotProps['onMouseOver']) => (props: Omit<DotProps, 'ref'>) => React.JSX.Element;
 export default CustomActiveDot;

package/line-chart/index.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { IBaseChartProps } from '../common/chart';
 export interface ILineChartProps<DataType = unknown> extends IBaseChartProps<DataType> {
     syncId?: number | string;
 }
-export declare function LineChart<DataType = unknown>(props: ILineChartProps<DataType>): JSX.Element;
+export declare function LineChart<DataType = unknown>(props: ILineChartProps<DataType>): React.JSX.Element;

package/line-chart/index.js

@@ -65,7 +65,7 @@ var chart_card_1 = require("../chart-card");
 var chart_1 = require("../common/chart");
 var custom_legend_1 = require("../common/custom-legend");
 function LineChart(props) {
-    var _a = props, data = _a.data, leftAxis = _a.leftAxis, bottomAxis = _a.bottomAxis, _b = _a.height, height = _b === void 0 ? 300 : _b, title = _a.title, value = _a.value, label = _a.label, helperText = _a.helperText, _c = _a.legend, legend = _c === void 0 ? true : _c, syncId = _a.syncId, _d = _a.color, color = _d === void 0 ? 'categorical' : _d;
+    var _a = props, data = _a.data, leftAxis = _a.leftAxis, bottomAxis = _a.bottomAxis, _b = _a.height, height = _b === void 0 ? 300 : _b, title = _a.title, value = _a.value, label = _a.label, helperText = _a.helperText, _c = _a.legend, legend = _c === void 0 ? true : _c, syncId = _a.syncId, _d = _a.color, color = _d === void 0 ? 'categorical' : _d, headerAction = _a.headerAction;
     var theme = (0, quantum_product_1.useTheme)();
     // Function to know how many lines we need based of how much different group values are.
     var groups = lodash_1.default.uniqBy(data, 'group').map(function (item) { return item.group; });
@@ -106,7 +106,7 @@ function LineChart(props) {
             _b[entry.group] = entry[leftAxisDataKey],
             _b;
     });
-    return (React.createElement(chart_card_1.ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText },
+    return (React.createElement(chart_card_1.ChartCard, { title: title, value: value, dataTable: data, label: label, helperText: helperText, headerAction: headerAction },
         React.createElement(recharts_1.ResponsiveContainer, { width: '100%', height: height }, data.length ? (React.createElement(recharts_1.LineChart, { data: Object.values(entries), height: height, width: 500, syncId: syncId, margin: {
                 top: 24,
                 right: 10,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auth0/quantum-charts",
-  "version": "0.2.1",
+  "version": "0.3.2",
   "sideEffects": false,
   "main": "./index.js",
   "types": "./index.d.ts",
@@ -16,7 +16,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@auth0/quantum-product": "^1.10.1",
+    "@auth0/quantum-product": "^2.0.0",
     "@formatjs/intl": "^2.5.1",
     "date-fns": "^2.29.3",
     "recharts": "^2.0.7"

package/scorecard/index.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { IChartSummaryProps } from '../chart-summary';
 interface IScoreCardProps {
     data: IChartSummaryProps[];
 }
-export declare function ScoreCard(props: IScoreCardProps): JSX.Element;
+export declare function ScoreCard(props: IScoreCardProps): React.JSX.Element;
 export {};

package/styles.d.ts

@@ -1,4 +1,4 @@
-export declare type IChartContainerProps = {
+export type IChartContainerProps = {
     height?: number | 'initial';
     marginTop?: number;
 };