@scality/core-ui 0.166.0 → 0.168.0

package/dist/components/linechart/LineChart.component.js

@@ -1,109 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { VegaChart } from '../vegachart/VegaChart.component';
-function LineChart({ id, data, xAxis, yAxis, color, tooltip = false, lineConfig, height = 300, width = 1000, displayTrendLine = false, strokeDashEncodingConfig, opacityEncodingConfig, tooltipConfig, tooltipTheme, ...rest }) {
-    // hardcode the trendline configuration for tooltip
-    const trendline = {
-        mark: 'rule',
-        selection: {
-            index: {
-                type: 'single',
-                on: 'mousemove',
-                encodings: ['x'],
-                nearest: true,
-            },
-        },
-        encoding: {
-            color: {
-                condition: {
-                    selection: {
-                        not: 'index',
-                    },
-                    value: 'transparent',
-                },
-            },
-        },
-    };
-    /*
-     ** strokeDash encoding allows to define a field in data items that defines the line stroke dash property
-     ** this would allow to get same color lines but having some dashed and some plains
-     ** https://vega.github.io/vega-lite/docs/line.html#multi-series-line-chart-with-varying-dashes
-     */
-    /*
-     ** opacity Encoding allows to define rules for each line's opacity
-     */
-    const lines = yAxis.map((y) => ({
-        mark: {
-            type: 'line',
-            ...lineConfig,
-        },
-        encoding: {
-            y,
-            strokeDash: strokeDashEncodingConfig,
-            opacity: opacityEncodingConfig,
-        },
-    }));
-    const currentTimeTrendline = {
-        mark: {
-            type: 'rule',
-            style: 'ruleCurrentTime',
-            color: 'white',
-            opacity: 0.2,
-        },
-        encoding: {
-            x: {
-                value: width / 2,
-            },
-            y: {
-                value: height,
-            },
-            y2: {
-                value: 0,
-            },
-        },
-    };
-    const topTrendline = {
-        mark: {
-            type: 'rule',
-            style: 'ruleTop',
-            color: 'orange',
-            opacity: 0.2,
-        },
-        encoding: {
-            y: {
-                aggregate: 'max',
-                field: 'capacity',
-                type: 'quantitative',
-            },
-            x: {
-                value: 0,
-            },
-            x2: {
-                value: width,
-            },
-        },
-    };
-    const spec = {
-        data: {
-            values: data,
-        },
-        encoding: {
-            x: xAxis,
-            color,
-            // To disable tooltips for a particular single view specification, you can set the "tooltip" property of a mark definition block to null.
-            tooltip: tooltip ? [xAxis, ...yAxis] : null,
-        },
-        height,
-        width,
-        layer: [...lines],
-        ...rest,
-    };
-    if (tooltip) {
-        spec.layer.push(tooltipConfig || trendline);
-    }
-    if (displayTrendLine) {
-        spec.layer.push(currentTimeTrendline);
-        spec.layer.push(topTrendline);
-    }
-    return (_jsx(VegaChart, { id: id, spec: spec, theme: tooltipTheme || 'light' }));
-}
-export { LineChart };

package/dist/components/multiselect/MultiSelect.component.d.ts

@@ -1,28 +0,0 @@
-export type ItemProps = {
-    selected?: boolean;
-    label: string;
-    description?: string;
-    onSelect?: (arg0: any, arg1: any) => void;
-    onItemRemove?: (arg0: any, arg1: any) => void;
-};
-export type OptionProps = {
-    label: string;
-    value: string | number;
-};
-export type SearchProps = {
-    placeholder?: string;
-    options: Array<OptionProps>;
-    onSelect: (arg0: any) => void;
-    onAdd?: (arg0: any) => void;
-    selectedOption: any;
-};
-type MultiSelectProps = {
-    title?: string;
-    items: Array<ItemProps>;
-    search?: SearchProps;
-    onItemRemove?: (arg0: any, arg1: any) => void;
-};
-declare function MultiSelectList({ title, items, search, onItemRemove, }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
-export declare const MultiSelect: typeof MultiSelectList;
-export {};
-//# sourceMappingURL=MultiSelect.component.d.ts.map

package/dist/components/multiselect/MultiSelect.component.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MultiSelect.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/multiselect/MultiSelect.component.tsx"],"names":[],"mappings":"AASA,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAE1C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;CAC/C,CAAC;AACF,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB,CAAC;AACF,MAAM,MAAM,WAAW,GAAG;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IAE5B,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAE9B,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC5B,cAAc,EAAE,GAAG,CAAC;CACrB,CAAC;AACF,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IACxB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;CAC/C,CAAC;AAqGF,iBAAS,eAAe,CAAC,EACvB,KAAU,EACV,KAAU,EACV,MAAM,EACN,YAAY,GACb,EAAE,gBAAgB,2CAclB;AAED,eAAO,MAAM,WAAW,wBAAkB,CAAC"}

package/dist/components/multiselect/MultiSelect.component.js

@@ -1,73 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from 'styled-components';
-import { spacing } from '../../spacing';
-import { fontSize, fontWeight } from '../../style/theme';
-import { getThemePropSelector } from '../../utils';
-import { Icon } from '../icon/Icon.component';
-import { Button } from './../button/Button.component';
-import { Checkbox } from './../checkbox/Checkbox.component';
-import { Select } from './../select/Select.component';
-const MultiSelectContainer = styled.div `
-  color: ${getThemePropSelector('textPrimary')};
-`;
-const MultiSelectTitle = styled.h3 `
-  padding: ${spacing.r16} 0;
-  margin: 0;
-  font-weight: ${fontWeight.bold};
-  font-size: ${fontSize.large};
-`;
-const MultiSelectItemContainer = styled.div `
-  margin: ${spacing.r4} 0;
-  padding: ${spacing.r8} 0;
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid gray;
-  &:last-child {
-    border: none;
-  }
-`;
-const MultiSelectSearchContainer = styled.div `
-  display: flex;
-  align-items: center;
-  .sc-select-container {
-    width: 100%;
-  }
-  .sc-button {
-    margin: 0 ${spacing.r8};
-  }
-`;
-const MultiSelectItemLeft = styled.div `
-  .sc-checkbox,
-  .sc-button {
-    margin: 0 ${spacing.r8};
-  }
-`;
-const MultiSelectItemCenter = styled.div `
-  display: flex;
-  flex-grow: 1;
-  align-items: center;
-  justify-content: space-between;
-`;
-const MultiSelectItemRight = styled.div `
-  padding: 0 ${spacing.r16};
-`;
-const MultiSelectItemLabel = styled.span `
-  font-size: ${fontSize.large};
-`;
-const MultiSelectItemDescription = styled.span ``;
-function MultiSelectItem(props) {
-    const { selected, label, description, onItemRemove, onSelect } = props;
-    return (_jsxs(MultiSelectItemContainer, { className: "sc-multi-select-item", children: [_jsx(MultiSelectItemLeft, { className: "sc-multi-select-item-left", children: typeof selected === 'boolean' && onSelect && (_jsx(Checkbox, { checked: selected, onChange: (event) => onSelect(label, event) })) }), _jsxs(MultiSelectItemCenter, { className: "sc-multi-select-item-center", children: [_jsx(MultiSelectItemLabel, { className: "sc-multi-select-item-label", children: label }), description && (_jsx(MultiSelectItemDescription, { className: "sc-multi-select-item-description", children: description }))] }), _jsx(MultiSelectItemRight, { className: "sc-multi-select-item-right", children: onItemRemove && (_jsx(Button, { inverted: true, variant: "buttonDelete", onClick: (event) => onItemRemove(label, event), icon: _jsx(Icon, { name: "Delete" }) })) })] }));
-}
-function MultiSelectSearch(props) {
-    const { selectedOption, onSelect, onAdd, ...rest } = props;
-    return (_jsxs(MultiSelectSearchContainer, { className: "sc-multi-select-list-search", children: [_jsx(Select
-            // @ts-ignore
-            , { 
-                // @ts-ignore
-                onChange: onSelect, value: selectedOption, ...rest }), onAdd && _jsx(Button, { onClick: onAdd, icon: _jsx(Icon, { name: "Create-add" }) })] }));
-}
-function MultiSelectList({ title = '', items = [], search, onItemRemove, }) {
-    return (_jsxs(MultiSelectContainer, { className: "sc-multi-select-list", children: [title && _jsx(MultiSelectTitle, { children: title }), search && _jsx(MultiSelectSearch, { ...search }), items.map((item, index) => (_jsx(MultiSelectItem, { onItemRemove: onItemRemove, ...item }, `sc-multi-select-item-${index}`)))] }));
-}
-export const MultiSelect = MultiSelectList;

package/dist/components/select/Select.component.d.ts

@@ -1,14 +0,0 @@
-export type Item = {
-    label: string;
-    value: string | number;
-};
-type Items = Array<Item>;
-type Props = {
-    id?: any;
-    options: Items;
-    formatOptionLabel?: (arg0: any) => JSX.Element;
-};
-declare function SelectBox({ options, formatOptionLabel, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
-export declare const Select: typeof SelectBox;
-export {};
-//# sourceMappingURL=Select.component.d.ts.map

package/dist/components/select/Select.component.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Select.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/select/Select.component.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,IAAI,GAAG;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB,CAAC;AACF,KAAK,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;AACzB,KAAK,KAAK,GAAG;IACX,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,OAAO,EAAE,KAAK,CAAC;IACf,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC,OAAO,CAAC;CAChD,CAAC;AAqEF,iBAAS,SAAS,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAYhE;AAED,eAAO,MAAM,MAAM,kBAAY,CAAC"}

package/dist/components/select/Select.component.js

@@ -1,71 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import ReactSelect from 'react-select';
-import styled from 'styled-components';
-import { fontSize, fontWeight, gray, zIndex } from '../../style/theme';
-import { getThemePropSelector } from '../../utils';
-const SelectContainer = styled.div `
-  font-size: ${fontSize.base};
-  .sc-select__control {
-    background-color: ${getThemePropSelector('backgroundLevel1')};
-    border-radius: 4px;
-    border: 1px solid ${getThemePropSelector('border')};
-    height: auto;
-
-    .sc-select__placeholder,
-    .sc-select__single-value {
-      color: ${getThemePropSelector('textSecondary')};
-    }
-    &.sc-select__control--is-focused {
-      border-color: ${getThemePropSelector('selectedActive')};
-      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
-        0 0 0 1px rgba(0, 126, 255, 0.1);
-      outline: none;
-    }
-    .sc-select__indicator {
-      color: ${getThemePropSelector('textSecondary')};
-      &.sc-select__dropdown-indicator:hover {
-        color: ${getThemePropSelector('selectedActive')};
-      }
-      &.sc-select__clear-indicator:hover {
-        color: ${gray};
-      }
-    }
-    .sc-select__multi-value__remove {
-      border-radius: 0;
-      color: ${getThemePropSelector('textSecondary')};
-      background-color: ${getThemePropSelector('backgroundLevel4')};
-      &:hover {
-        color: ${gray};
-      }
-    }
-    .sc-select__multi-value__label {
-      border-radius: 0;
-      color: ${getThemePropSelector('selectedActive')};
-      background-color: ${getThemePropSelector('backgroundLevel4')};
-      vertical-align: initial;
-    }
-  }
-  .sc-select__menu {
-    background-color: ${getThemePropSelector('backgroundLevel1')};
-    color: ${getThemePropSelector('textSecondary')};
-    border: 1px solid ${getThemePropSelector('selectedActive')};
-    box-sizing: border-box;
-    overflow: hidden;
-    z-index: ${zIndex.dropdown};
-    .sc-select__option {
-      &.sc-select__option--is-focused {
-        background-color: ${getThemePropSelector('backgroundLevel1')};
-      }
-      &.sc-select__option--is-selected {
-        background-color: ${getThemePropSelector('backgroundLevel1')};
-        color: ${getThemePropSelector('selectedActive')};
-        font-weight: ${fontWeight.bold};
-      }
-    }
-  }
-`;
-const defaultFormatOptionLabel = ({ label, ...rest }) => (_jsx("div", { className: "sc-select-option-label", ...rest, children: label }));
-function SelectBox({ options, formatOptionLabel, ...rest }) {
-    return (_jsx(SelectContainer, { className: "sc-select-container", children: _jsx(ReactSelect, { className: "sc-select", classNamePrefix: "sc-select", options: options, formatOptionLabel: formatOptionLabel || defaultFormatOptionLabel, ...rest }) }));
-}
-export const Select = SelectBox;

package/dist/components/spacedbox/SpacedBox.d.ts

@@ -1,34 +0,0 @@
-type SpacingValue = 0 | 1 | 2 | 4 | 8 | 12 | 14 | 16 | 20 | 24 | 28 | 32;
-export type Props = {
-    m?: SpacingValue;
-    mt?: SpacingValue;
-    mr?: SpacingValue;
-    mb?: SpacingValue;
-    ml?: SpacingValue;
-    mx?: SpacingValue;
-    my?: SpacingValue;
-    p?: SpacingValue;
-    pt?: SpacingValue;
-    pr?: SpacingValue;
-    pb?: SpacingValue;
-    pl?: SpacingValue;
-    px?: SpacingValue;
-    py?: SpacingValue;
-};
-/**
- * @deprecated
- * Please use Box with import { Box } from '@scality/core-ui/dist/next';
- *
- * Most common use cases:
- *
- * `<SpacedBox m={14}><Component /></SpacedBox>`
- *
- * `<SpacedBox as={SpanComponent}><Component /></SpacedBox>`
- *
- * Props : m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py
- *
- * Values: 0, 1, 2, 4, 8, 12, 14, 16, 20, 24, 28, 32
- */
-declare const SpacedBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Props, never>;
-export { SpacedBox };
-//# sourceMappingURL=SpacedBox.d.ts.map

package/dist/components/spacedbox/SpacedBox.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SpacedBox.d.ts","sourceRoot":"","sources":["../../../src/lib/components/spacedbox/SpacedBox.ts"],"names":[],"mappings":"AAEA,KAAK,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AACzE,MAAM,MAAM,KAAK,GAAG;IAClB,CAAC,CAAC,EAAE,YAAY,CAAC;IACjB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,CAAC,CAAC,EAAE,YAAY,CAAC;IACjB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,EAAE,CAAC,EAAE,YAAY,CAAC;CACnB,CAAC;AAmEF;;;;;;;;;;;;;GAaG;AACH,QAAA,MAAM,SAAS,4GAed,CAAC;AACF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/spacedbox/SpacedBox.js

@@ -1,64 +0,0 @@
-import styled from 'styled-components';
-import { spacing } from '../../style/theme';
-const validValue = [0, 1, 2, 4, 8, 12, 14, 16, 20, 24, 28, 32];
-const createSpacingFn = (propsName, spacingFields) => (props) => {
-    if (!props[propsName] && props[propsName] !== 0) {
-        return null;
-    }
-    //@ts-ignore -- this is ensured below
-    let value = props[propsName];
-    if (!validValue.includes(value)) {
-        console.warn(`'${propsName}' props should be a number in this list: ` +
-            '0, 1, 2, 4, 8, 12, 14, 16, 20, 24, 28, 32');
-        return null;
-    }
-    const result = spacingFields
-        .map((param) => `${param}: ${spacing[`sp${value}`]}`)
-        .join(';');
-    return result;
-};
-const m = createSpacingFn('m', ['margin']);
-const mt = createSpacingFn('mt', ['margin-top']);
-const mr = createSpacingFn('mr', ['margin-right']);
-const mb = createSpacingFn('mb', ['margin-bottom']);
-const ml = createSpacingFn('ml', ['margin-left']);
-const mx = createSpacingFn('mx', ['margin-left', 'margin-right']);
-const my = createSpacingFn('my', ['margin-top', 'margin-bottom']);
-const p = createSpacingFn('p', ['padding']);
-const pt = createSpacingFn('pt', ['padding-top']);
-const pr = createSpacingFn('pr', ['padding-right']);
-const pb = createSpacingFn('pb', ['padding-bottom']);
-const pl = createSpacingFn('pl', ['padding-left']);
-const px = createSpacingFn('px', ['padding-left', 'padding-right']);
-const py = createSpacingFn('py', ['padding-top', 'padding-bottom']);
-/**
- * @deprecated
- * Please use Box with import { Box } from '@scality/core-ui/dist/next';
- *
- * Most common use cases:
- *
- * `<SpacedBox m={14}><Component /></SpacedBox>`
- *
- * `<SpacedBox as={SpanComponent}><Component /></SpacedBox>`
- *
- * Props : m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py
- *
- * Values: 0, 1, 2, 4, 8, 12, 14, 16, 20, 24, 28, 32
- */
-const SpacedBox = styled.div `
-  ${m};
-  ${mt};
-  ${mr};
-  ${mb};
-  ${ml};
-  ${mx};
-  ${my};
-  ${p};
-  ${pt};
-  ${pr};
-  ${pb};
-  ${pl};
-  ${px};
-  ${py};
-`;
-export { SpacedBox };

package/dist/components/sparkline/SparkLine.component.d.ts

@@ -1,18 +0,0 @@
-type Props = {
-    id: string;
-    title?: string;
-    width?: number;
-    height?: number;
-    data: Array<Record<string, any>>;
-    xAxis: Record<string, any>;
-    yAxis: Record<string, any>;
-    row: Record<string, any>;
-    lineConfig?: Record<string, any>;
-    sparkLineColor?: string;
-    upTrendColor?: string;
-    bottomTrendColor?: string;
-};
-declare function SparkLine({ id, title, width, height, data, xAxis, yAxis, row, lineConfig, sparkLineColor, upTrendColor, bottomTrendColor, }: Props): import("react/jsx-runtime").JSX.Element;
-export declare const Sparkline: typeof SparkLine;
-export {};
-//# sourceMappingURL=SparkLine.component.d.ts.map

package/dist/components/sparkline/SparkLine.component.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SparkLine.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/sparkline/SparkLine.component.tsx"],"names":[],"mappings":"AAEA,KAAK,KAAK,GAAG;IACX,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3B,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,iBAAS,SAAS,CAAC,EACjB,EAAE,EACF,KAAK,EACL,KAAW,EACX,MAAW,EACX,IAAI,EACJ,KAAK,EACL,KAAK,EACL,GAAG,EACH,UAAU,EACV,cAAc,EACd,YAA2B,EAC3B,gBAAwB,GACzB,EAAE,KAAK,2CA+IP;AAED,eAAO,MAAM,SAAS,kBAAY,CAAC"}

package/dist/components/sparkline/SparkLine.component.js

@@ -1,148 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { VegaChart } from '../vegachart/VegaChart.component';
-import { yellowOrange, green } from '../../style/theme';
-function SparkLine({ id, title, width = 300, height = 80, data, xAxis, yAxis, row, lineConfig, sparkLineColor, upTrendColor = yellowOrange, bottomTrendColor = green, }) {
-    const spec = {
-        title: {
-            text: title,
-        },
-        data: {
-            values: data,
-        },
-        facet: {
-            row,
-        },
-        spec: {
-            width,
-            height,
-            layer: [
-                // display the sparkline chart
-                {
-                    mark: {
-                        type: 'line',
-                        ...lineConfig,
-                    },
-                    encoding: {
-                        x: xAxis,
-                        y: yAxis,
-                        color: {
-                            value: sparkLineColor,
-                        },
-                    },
-                }, // display the label to specify the max/min data
-                {
-                    mark: {
-                        type: 'text',
-                        style: 'labelMin',
-                        align: 'bottom',
-                        dy: height / 2,
-                        dx: width / 2 + 10,
-                    },
-                    encoding: {
-                        text: {
-                            aggregate: 'min',
-                            field: 'y',
-                            type: 'quantitative',
-                        },
-                    },
-                },
-                {
-                    mark: {
-                        type: 'text',
-                        style: 'labelMax',
-                        align: 'top',
-                        dy: -(height / 2),
-                        dx: width / 2 + 10,
-                    },
-                    encoding: {
-                        text: {
-                            aggregate: 'max',
-                            field: 'y',
-                            type: 'quantitative',
-                        },
-                    },
-                }, // display the up and bottom trend line
-                {
-                    mark: {
-                        type: 'rule',
-                        style: 'ruleMaxEnd',
-                        color: upTrendColor,
-                    },
-                    encoding: {
-                        y: {
-                            aggregate: 'max',
-                            field: 'y',
-                            type: 'quantitative',
-                        },
-                        x: {
-                            value: width - 15,
-                        },
-                        x2: {
-                            value: width,
-                        },
-                    },
-                },
-                {
-                    mark: {
-                        type: 'rule',
-                        style: 'ruleMaxStart',
-                        color: upTrendColor,
-                        opacity: 0.1,
-                    },
-                    encoding: {
-                        y: {
-                            aggregate: 'max',
-                            field: 'y',
-                            type: 'quantitative',
-                        },
-                        x: {
-                            value: 0,
-                        },
-                        x2: {
-                            value: width - 15,
-                        },
-                    },
-                },
-                {
-                    mark: {
-                        type: 'rule',
-                        style: 'ruleMinEnd',
-                        color: bottomTrendColor,
-                    },
-                    encoding: {
-                        y: {
-                            value: height,
-                        },
-                        x: {
-                            value: width - 15,
-                        },
-                        x2: {
-                            value: width,
-                        },
-                    },
-                },
-                {
-                    mark: {
-                        type: 'rule',
-                        style: 'ruleMinStart',
-                        color: bottomTrendColor,
-                        opacity: 0.1,
-                    },
-                    encoding: {
-                        y: {
-                            value: height,
-                        },
-                        x: {
-                            value: 0,
-                        },
-                        x2: {
-                            value: width - 15,
-                        },
-                    },
-                },
-            ],
-        },
-    };
-    return _jsx(VegaChart, { className: "sc-sparkline", id: id, spec: spec });
-}
-export const Sparkline = SparkLine;

package/dist/components/vegachart/VegaChart.component.d.ts

@@ -1,13 +0,0 @@
-export declare const TOP = "top";
-export declare const BOTTOM = "bottom";
-type Position = typeof TOP | typeof BOTTOM;
-type Props = {
-    id: string;
-    spec: Record<string, any>;
-    tooltipPosition?: Position;
-    theme?: 'light' | 'dark' | 'custom';
-    className?: string;
-};
-declare function VegaChart({ id, spec, tooltipPosition, theme, }: Props): import("react/jsx-runtime").JSX.Element;
-export { VegaChart };
-//# sourceMappingURL=VegaChart.component.d.ts.map

package/dist/components/vegachart/VegaChart.component.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"VegaChart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/vegachart/VegaChart.component.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,GAAG,QAAQ,CAAC;AACzB,eAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,KAAK,QAAQ,GAAG,OAAO,GAAG,GAAG,OAAO,MAAM,CAAC;AAC3C,KAAK,KAAK,GAAG;IACX,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC1B,eAAe,CAAC,EAAE,QAAQ,CAAC;IAC3B,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA0BF,iBAAS,SAAS,CAAC,EACjB,EAAE,EACF,IAAI,EACJ,eAAwB,EACxB,KAAgB,GACjB,EAAE,KAAK,2CAkGP;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}