@antscorp/antsomi-ui 1.3.2 → 1.3.3

package/es/components/organism/Table/CrossTabTable/styled.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+export const BarCell = styled.div `
+  position: absolute;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.075);
+
+  .bar-line {
+    position: absolute;
+    bottom: 0;
+    height: 3px;
+    width: 100%;
+  }
+`;

package/es/components/organism/Table/CrossTabTable/utils.js

@@ -0,0 +1 @@
+export const refinePivotHeaders = (pivotHeaders) => { };

package/es/components/organism/Table/ExplorePivotTable/ExplorePivotTable.js

@@ -0,0 +1,51 @@
+// Libraries
+import React, { useCallback, useState } from 'react';
+// Styled
+import { StyledHeader, StyledTable } from './styled';
+// Hooks
+import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
+// Components
+import { Typography } from '@antscorp/antsomi-ui/es/components/atoms/Typography';
+// Constants
+import { TEST_DATA } from './constants';
+// Utils
+import { buildColumns, buildDataSource } from './utils';
+export const ExplorePivotTable = props => {
+    // Props
+    const { scroll, data } = props;
+    // State
+    const [state, setState] = useState({
+        columns: [],
+        dataSource: [],
+    });
+    // Effects
+    useDeepCompareEffect(() => {
+        const columns = buildColumns(data);
+        const dataSource = buildDataSource(data);
+        setState(state => (Object.assign(Object.assign({}, state), { columns, dataSource })));
+    }, [data]);
+    // Handles
+    const renderHeader = useCallback((data) => {
+        const { versions, metrics, columnDimension } = data;
+        if (columnDimension.length) {
+            const firstVersion = versions[0];
+            const metric = metrics[0];
+            return (React.createElement(StyledHeader, null,
+                React.createElement(Typography, { style: { color: 'white' } },
+                    firstVersion.name,
+                    " / ",
+                    metric.label)));
+        }
+        return null;
+    }, []);
+    return (React.createElement("div", null,
+        renderHeader(data),
+        React.createElement(StyledTable, { showHeader: true, bordered: true, size: "small", scroll: scroll, columns: state.columns, dataSource: state.dataSource, pagination: false })));
+};
+ExplorePivotTable.defaultProps = {
+    data: TEST_DATA,
+    scroll: {
+        x: 0,
+        y: 500,
+    },
+};

package/es/components/organism/Table/ExplorePivotTable/components/CustomCell/CustomCell.js

@@ -0,0 +1,41 @@
+// Libraries
+import React, { useMemo } from 'react';
+// Styled
+import { BarCell, HeatCell, StyledValue } from './styled';
+// Utils
+import { generateHeatMapColor, hexToRgb } from '@antscorp/antsomi-ui/es/utils';
+import { GRAND_TOTAL_KEY } from '../../constants';
+export const CustomCell = props => {
+    const { value, color, type, max, record, index: _index } = props;
+    const width = useMemo(() => {
+        const draftWidth = (value * 100) / (max || 1);
+        return draftWidth > 100 ? 100 : draftWidth;
+    }, [value, max]);
+    const renderCustomCell = (record) => {
+        const { key } = record;
+        const formatValue = value.toLocaleString();
+        if (key === GRAND_TOTAL_KEY) {
+            return React.createElement("strong", null, formatValue);
+        }
+        switch (type) {
+            case 'bar':
+                return (React.createElement(React.Fragment, null,
+                    React.createElement(BarCell, { style: { width: `${width}%` } },
+                        React.createElement("div", { className: "bar-line", style: { backgroundColor: color } })),
+                    React.createElement(StyledValue, null, formatValue)));
+            case 'heat':
+                return (React.createElement(React.Fragment, null,
+                    React.createElement(HeatCell, { style: {
+                            backgroundColor: generateHeatMapColor(value, max || 0, hexToRgb(color || '')),
+                        } }),
+                    React.createElement(StyledValue, null, formatValue)));
+            default:
+                return formatValue;
+        }
+    };
+    return React.createElement(React.Fragment, null, renderCustomCell(record));
+};
+CustomCell.defaultProps = {
+    color: '#4285F4',
+    type: 'text',
+};

package/es/components/organism/Table/ExplorePivotTable/components/CustomCell/index.d.ts

@@ -0,0 +1 @@
+export { CustomCell } from './CustomCell';

package/es/components/organism/Table/ExplorePivotTable/components/CustomCell/index.js

@@ -0,0 +1 @@
+export { CustomCell } from './CustomCell';

package/es/components/organism/Table/ExplorePivotTable/components/CustomCell/styled.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+export const BarCell = styled.div `
+  position: absolute;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.075);
+
+  .bar-line {
+    position: absolute;
+    bottom: 0;
+    height: 3px;
+    width: 100%;
+  }
+`;
+export const HeatCell = styled.div `
+  position: absolute;
+  inset: 0;
+`;
+export const StyledValue = styled.div `
+  position: relative;
+  z-index: 1;
+`;

package/es/components/organism/Table/ExplorePivotTable/constants.js

@@ -0,0 +1,84 @@
+const GRAND_TOTAL_KEY = 'grand-total';
+const TEST_DATA = {
+    versions: [
+        {
+            key: '20230621115346',
+            name: '11:53:46 AM Jun 21, 2023',
+        },
+        {
+            key: '20230621114632',
+            name: '11:46:32 AM Jun 21, 2023',
+        },
+    ],
+    rowDimension: [
+        'Promising',
+        'Lost Customer',
+        'Champions',
+        'Hibernating Customers',
+        'Cannot Lose Them',
+        'About To Sleep',
+        'Loyal',
+        'Potential Loyalists',
+        'Need Attention',
+        'New Customer',
+        'At Risk',
+    ],
+    columnDimension: [
+        'At Risk',
+        'New Customer',
+        'Need Attention',
+        'Potential Loyalists',
+        'Loyal',
+        'About To Sleep',
+        'Cannot Lose Them',
+        'Hibernating Customers',
+        'Champions',
+        'Lost Customer',
+        'Promising',
+    ],
+    dataRow: [
+        [0, 0, 0, 0, 0, 45, 32, 0, 0, 0, 1821],
+        [0, 0, 0, 0, 0, 0, 0, 0, 0, 876, 0],
+        [0, 0, 0, 0, 21, 0, 0, 0, 835, 0, 0],
+        [0, 0, 0, 0, 0, 0, 0, 673, 0, 49, 0],
+        [0, 0, 0, 0, 0, 0, 624, 0, 0, 0, 0],
+        [0, 0, 0, 0, 0, 400, 16, 23, 0, 0, 0],
+        [0, 0, 0, 0, 143, 0, 0, 0, 0, 0, 0],
+        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    ],
+    totalRowDimension: [164, 445, 672, 696, 835, 925, 1821],
+    totalColumnDimension: [1898, 876, 856, 722, 624, 439, 143],
+    maxValue: 1821,
+    metrics: [
+        {
+            name: 'customer_id',
+            label: 'Num of customers',
+            dataType: 'NUMBER',
+            semantics: {
+                conceptType: 'METRIC',
+                semanticType: 'NUMBER',
+            },
+            aggregationType: 'count',
+            filterAggregationType: 'count',
+        },
+    ],
+    dimensions: [
+        {
+            name: 'personas',
+            label: 'Personas name',
+            dataType: 'STRING',
+            semantics: {
+                conceptType: 'DIMENSION',
+                semanticType: 'STRING',
+            },
+            aggregationType: 'none',
+            filterAggregationType: 'none',
+        },
+    ],
+    showColumnTotal: true,
+    showRowTotal: true,
+};
+export { TEST_DATA, GRAND_TOTAL_KEY };

package/es/components/organism/Table/ExplorePivotTable/styled.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+import { Table } from '../Table';
+export const StyledTable = styled(Table) `
+  .antsomi-table-thead {
+    .antsomi-table-cell {
+      background-color: white !important;
+      font-weight: 400 !important;
+    }
+  }
+`;
+export const StyledHeader = styled.div `
+  background-color: #4285f4;
+  padding: 8px 10px;
+  text-align: right;
+`;

package/es/components/organism/Table/ExplorePivotTable/utils.js

@@ -0,0 +1,154 @@
+// React
+import React from 'react';
+// Components
+import { CustomCell } from './components/CustomCell';
+import { get } from 'lodash';
+// Utils
+import { handleError } from '@antscorp/antsomi-ui/es/utils';
+import { GRAND_TOTAL_KEY } from './constants';
+const PATH = '@antscorp/antsomi-ui/es/components/organism/Table/ExploreTable/utils.tsx';
+export const buildColumns = (data) => {
+    const { columnDimension, rowDimension, dataRow, maxValue, metrics, dimensions, versions, showColumnTotal, } = data;
+    const dimension = dimensions[0];
+    const metric = metrics[0];
+    const columns = [];
+    if (dimension && metric) {
+        // Check is it contains 2 versions and has columnDimension
+        if (Array.isArray(columnDimension) && columnDimension.length && versions.length > 1) {
+            // Create first column with dimension name
+            const secondVersion = versions[1] || {};
+            columns.push({
+                title: ' ',
+                children: [
+                    {
+                        title: secondVersion.name,
+                        dataIndex: dimension.name,
+                        key: dimension.name,
+                        fixed: 'left',
+                        ellipsis: true,
+                        width: 150,
+                        render: (value, record) => record.key === GRAND_TOTAL_KEY ? React.createElement("strong", null, value) : value,
+                    },
+                ],
+            });
+            columnDimension.forEach(column => {
+                columns.push({
+                    title: column,
+                    align: 'right',
+                    ellipsis: true,
+                    children: [
+                        {
+                            title: metric.label,
+                            dataIndex: `${column}-${metric.name}`,
+                            key: `${column}-${metric.name}`,
+                            align: 'right',
+                            ellipsis: true,
+                            width: 120,
+                            render: (value, record, index) => (React.createElement(CustomCell, { value: value, record: record, index: index, type: "heat", max: maxValue })),
+                        },
+                    ],
+                });
+            });
+            if (showColumnTotal) {
+                columns.push({
+                    title: React.createElement("strong", null, "Grand total"),
+                    align: 'right',
+                    children: [
+                        {
+                            title: React.createElement("strong", null, metric.label),
+                            dataIndex: `${GRAND_TOTAL_KEY}-${metric.name}`,
+                            key: `${GRAND_TOTAL_KEY}-${metric.name}`,
+                            fixed: 'right',
+                            align: 'right',
+                            ellipsis: true,
+                            width: 150,
+                            render: value => React.createElement("strong", null, value),
+                        },
+                    ],
+                });
+            }
+        }
+        else {
+            const firstVersion = versions[0] || {};
+            columns.push({
+                title: dimension.label,
+                dataIndex: dimension.name,
+                key: dimension.name,
+                ellipsis: true,
+                width: 150,
+                render: (value, record) => record.key === GRAND_TOTAL_KEY ? React.createElement("strong", null, value) : value,
+            });
+            if (firstVersion) {
+                columns.push({
+                    title: React.createElement("strong", null, `${firstVersion.name} / ${metric.label}`),
+                    dataIndex: metric.name,
+                    key: metric.name,
+                    ellipsis: true,
+                    align: 'right',
+                    render: (value, record, index) => (React.createElement(CustomCell, { value: value, record: record, index: index, type: "heat", max: maxValue })),
+                });
+            }
+        }
+    }
+    return columns;
+};
+export const buildDataSource = (data) => {
+    try {
+        const { columnDimension, rowDimension, dataRow, metrics, dimensions, versions, showColumnTotal, showRowTotal, totalColumnDimension, totalRowDimension, } = data;
+        const dimension = dimensions[0];
+        const metric = metrics[0];
+        const dataSource = [];
+        if (dimension && metric && Array.isArray(dataRow)) {
+            // Check is it contains 2 versions and has columnDimension
+            if (Array.isArray(columnDimension) && columnDimension.length && versions.length > 1) {
+                rowDimension.forEach((row, rowIndex) => {
+                    const dimensionObjectValue = {};
+                    columnDimension.forEach((col, colIndex) => {
+                        dimensionObjectValue[`${col}-${metric.name}`] = get(dataRow, `[${rowIndex}][${colIndex}]`, 0);
+                    });
+                    if (showColumnTotal) {
+                        dimensionObjectValue[`${GRAND_TOTAL_KEY}-${metric.name}`] = get(totalColumnDimension, `[${rowIndex}]`, 0).toLocaleString();
+                    }
+                    dataSource.push(Object.assign({ key: rowIndex, [dimension.name]: row }, dimensionObjectValue));
+                });
+                if (showRowTotal) {
+                    const totalObjectValue = {};
+                    columnDimension.forEach((col, colIndex) => {
+                        totalObjectValue[`${col}-${metric.name}`] = get(totalRowDimension, `[${colIndex}]`, 0).toLocaleString();
+                    });
+                    if (showColumnTotal) {
+                        totalObjectValue[`${GRAND_TOTAL_KEY}-${metric.name}`] = columnDimension
+                            .reduce((acc, _curr, index) => acc + (Number(totalRowDimension[index]) || 0), 0)
+                            .toLocaleString();
+                    }
+                    dataSource.push(Object.assign({ key: `${GRAND_TOTAL_KEY}`, [dimension.name]: 'Grand total' }, totalObjectValue));
+                }
+            }
+            else {
+                dataRow.forEach((row, rowIndex) => {
+                    dataSource.push({
+                        key: rowIndex,
+                        [dimension.name]: rowDimension[rowIndex],
+                        [metric.name]: row,
+                    });
+                });
+                if (showRowTotal) {
+                    dataSource.push({
+                        key: GRAND_TOTAL_KEY,
+                        [dimension.name]: 'Grand total',
+                        [metric.name]: dataRow.reduce((acc, curr) => acc + curr, 0),
+                    });
+                }
+            }
+        }
+        return dataSource;
+    }
+    catch (error) {
+        handleError(error, {
+            path: PATH,
+            name: '',
+            args: {},
+        });
+        return [];
+    }
+};

package/es/constants/gradientSetting.d.ts

@@ -0,0 +1,83 @@
+export declare const GRADIENT_TEXT_LABEL: {
+    linear: string;
+    radial: string;
+    gradientStyle: string;
+    angle: string;
+    gradientColor: string;
+    gradientLocation: string;
+    firstColor: string;
+    secondColor: string;
+    firstColorLocation: string;
+    secondColorLocation: string;
+    leftTop: string;
+    leftCenter: string;
+    leftBottom: string;
+    rightTop: string;
+    rightCenter: string;
+    rightBottom: string;
+    centerTop: string;
+    centerCenter: string;
+    centerBottom: string;
+    position: string;
+    addColor: string;
+    ordinalText: {
+        first: string;
+        second: string;
+        third: string;
+        fourth: string;
+        fifth: string;
+        sixth: string;
+        seventh: string;
+        eighth: string;
+        ninth: string;
+        tenth: string;
+    };
+};
+export declare const GRADIENT_TYPE: {
+    LINEAR: {
+        value: string;
+        label: string;
+    };
+    RADIAL: {
+        value: string;
+        label: string;
+    };
+};
+export declare const POSITION: {
+    readonly LEFT_TOP: {
+        readonly value: "left top";
+        readonly label: string;
+    };
+    readonly LEFT_CENTER: {
+        readonly value: "left center";
+        readonly label: string;
+    };
+    readonly LEFT_BOTTOM: {
+        readonly value: "left bottom";
+        readonly label: string;
+    };
+    readonly RIGHT_TOP: {
+        readonly value: "right top";
+        readonly label: string;
+    };
+    readonly RIGHT_CENTER: {
+        readonly value: "right center";
+        readonly label: string;
+    };
+    readonly RIGHT_BOTTOM: {
+        readonly value: "right bottom";
+        readonly label: string;
+    };
+    readonly CENTER_TOP: {
+        readonly value: "center top";
+        readonly label: string;
+    };
+    readonly CENTER_CENTER: {
+        readonly value: "center center";
+        readonly label: string;
+    };
+    readonly CENTER_BOTTOM: {
+        readonly value: "center bottom";
+        readonly label: string;
+    };
+};

package/es/constants/gradientSetting.js

@@ -0,0 +1,86 @@
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+import { translations } from '../locales/translations';
+const { t } = i18nInstance;
+export const GRADIENT_TEXT_LABEL = {
+    linear: 'Linear',
+    radial: 'Radial',
+    gradientStyle: 'Gradient Style',
+    angle: 'Angle',
+    gradientColor: '{{name}} Color',
+    gradientLocation: '{{name}} Color Location',
+    firstColor: 'First Color',
+    secondColor: 'Second Color',
+    firstColorLocation: 'First Color Location',
+    secondColorLocation: 'Second Color Location',
+    leftTop: 'Left Top',
+    leftCenter: 'Left Center',
+    leftBottom: 'Left Bottom',
+    rightTop: 'Right Top',
+    rightCenter: 'Right Center',
+    rightBottom: 'Right Bottom',
+    centerTop: 'Center Top',
+    centerCenter: 'Center Center',
+    centerBottom: 'Center Bottom',
+    position: 'Position',
+    addColor: 'Add color',
+    ordinalText: {
+        first: 'First',
+        second: 'Second',
+        third: 'Third',
+        fourth: 'Fourth',
+        fifth: 'Fifth',
+        sixth: 'Sixth',
+        seventh: 'Seventh',
+        eighth: 'Eighth',
+        ninth: 'Ninth',
+        tenth: 'Tenth',
+    },
+};
+export const GRADIENT_TYPE = {
+    LINEAR: {
+        value: 'linear-gradient',
+        label: t(translations.linear),
+    },
+    RADIAL: {
+        value: 'radial-gradient',
+        label: t(translations.radial),
+    },
+};
+export const POSITION = {
+    LEFT_TOP: {
+        value: 'left top',
+        label: t(translations.leftTop),
+    },
+    LEFT_CENTER: {
+        value: 'left center',
+        label: t(translations.leftCenter),
+    },
+    LEFT_BOTTOM: {
+        value: 'left bottom',
+        label: t(translations.leftBottom),
+    },
+    RIGHT_TOP: {
+        value: 'right top',
+        label: t(translations.rightTop),
+    },
+    RIGHT_CENTER: {
+        value: 'right center',
+        label: t(translations.rightCenter),
+    },
+    RIGHT_BOTTOM: {
+        value: 'right bottom',
+        label: t(translations.rightBottom),
+    },
+    CENTER_TOP: {
+        value: 'center top',
+        label: t(translations.centerTop),
+    },
+    CENTER_CENTER: {
+        value: 'center center',
+        label: t(translations.centerCenter),
+    },
+    CENTER_BOTTOM: {
+        value: 'center bottom',
+        label: t(translations.centerBottom),
+    },
+};

package/es/constants/index.d.ts

@@ -0,0 +1,3 @@
+export { THEME } from './theme';
+export * from './storybook';
+export * from './gradientSetting';

package/es/constants/index.js

@@ -0,0 +1,3 @@
+export { THEME } from './theme';
+export * from './storybook';
+export * from './gradientSetting';