@carbon/charts 1.8.0 → 1.9.0-next.0

package/dist/configuration-non-customizable.d.ts

@@ -0,0 +1,263 @@
+import { easeCubicInOut } from 'd3';
+import { LegendItemType } from './interfaces/enums';
+export declare const carbonPrefix = "cds";
+export declare const area: {
+    opacity: {
+        unselected: number;
+        selected: number;
+    };
+};
+export declare const axis: {
+    ticks: {
+        number: number;
+        rotateIfSmallerThan: number;
+        verticalSpaceRatio: number;
+        horizontalSpaceRatio: number;
+    };
+    ratio: {
+        reference: string;
+        compareTo: string;
+    };
+    paddingRatio: number;
+    hover: {
+        rectanglePadding: number;
+    };
+};
+export declare const canvasZoomSettings: {
+    duration: number;
+    ease: typeof easeCubicInOut;
+    zoomLevel: number;
+};
+export declare const circlePack: {
+    circles: {
+        fillOpacity: number;
+        hover: {
+            stroke: string;
+        };
+    };
+    padding: {
+        mainGroup: number;
+        children: number;
+    };
+    hierarchyLevel: number;
+};
+export declare const color: {
+    pairingOptions: {
+        '1-color': number;
+        '2-color': number;
+        '3-color': number;
+        '4-color': number;
+        '5-color': number;
+        '14-color': number;
+    };
+};
+export declare const boxplot: {
+    circle: {
+        radius: number;
+        opacity: {
+            hovered: number;
+            default: number;
+        };
+    };
+    box: {
+        opacity: {
+            hovered: number;
+            default: number;
+        };
+    };
+    strokeWidth: {
+        default: number;
+        thicker: number;
+    };
+};
+export declare const histogram: {
+    defaultBins: number;
+};
+export declare const legend: {
+    items: {
+        status: {
+            ACTIVE: number;
+            DISABLED: number;
+        };
+        horizontalSpace: number;
+        verticalSpace: number;
+        textYOffset: number;
+        spaceAfter: number;
+    };
+    checkbox: {
+        radius: number;
+    };
+    radius: {
+        iconData: {
+            cx: number;
+            cy: number;
+            r: number;
+        }[];
+        fill: any;
+        stroke: string;
+    };
+    line: {
+        yPosition: number;
+        width: number;
+        strokeWidth: number;
+        fill: any;
+        stroke: string;
+    };
+    area: {
+        width: number;
+        height: number;
+        fill: string;
+        stroke: any;
+    };
+    size: {
+        iconData: {
+            width: number;
+            height: number;
+        }[];
+        fill: any;
+        stroke: string;
+    };
+    quartile: {
+        iconData: {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+        }[];
+    };
+    zoom: {
+        iconData: {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+        }[];
+        color: string;
+    };
+    color: {
+        barWidth: number;
+        barHeight: number;
+        axisYTranslation: number;
+    };
+};
+export declare const lines: {
+    opacity: {
+        unselected: number;
+        selected: number;
+    };
+    weight: {
+        selected: number;
+        unselected: number;
+    };
+};
+export declare const meter: {
+    statusBar: {
+        paddingRight: number;
+    };
+    status: {
+        indicatorSize: number;
+        paddingLeft: number;
+    };
+    total: {
+        paddingLeft: number;
+        paddingRight: number;
+    };
+    height: {
+        default: number;
+        proportional: number;
+    };
+    dividerWidth: number;
+};
+export declare const pie: {
+    radiusOffset: number;
+    innerRadius: number;
+    padAngle: number;
+    hoverArc: {
+        outerRadiusOffset: number;
+    };
+    xOffset: number;
+    yOffset: number;
+    yOffsetCallout: number;
+    callout: {
+        minSliceDegree: number;
+        offsetX: number;
+        offsetY: number;
+        horizontalLineLength: number;
+        textMargin: number;
+    };
+};
+export declare const radar: {
+    opacity: {
+        unselected: number;
+        selected: number;
+    };
+    xLabelPadding: number;
+    yLabelPadding: number;
+    yTicksNumber: number;
+    minRange: number;
+    xAxisRectHeight: number;
+    dotsRadius: number;
+};
+export declare const alluvial: {
+    nodeWidth: number;
+    nodeHoveredWidth: number;
+    minNodePadding: number;
+    opacity: {
+        unfocus: number;
+        default: number;
+        selected: number;
+    };
+};
+export declare const heatmap: {
+    minCellDividerDimension: number;
+    chartPadding: number;
+};
+export declare const spacers: {
+    default: {
+        size: number;
+    };
+};
+export declare const tooltips: {
+    horizontalOffset: number;
+};
+/**
+ * Base transition configuration
+ */
+export declare const transitions: {
+    default: {
+        duration: number;
+    };
+    pie_slice_mouseover: {
+        duration: number;
+    };
+    pie_chart_titles: {
+        duration: number;
+    };
+    graph_element_mouseover_fill_update: {
+        duration: number;
+    };
+    graph_element_mouseout_fill_update: {
+        duration: number;
+    };
+};
+export declare const toolbar: {
+    buttonSize: number;
+    iconSize: number;
+    height: number;
+    spacerHeight: number;
+    iconPadding: number;
+};
+export declare const zoomBar: {
+    height: {
+        graph_view: number;
+        slider_view: number;
+    };
+    spacerHeight: number;
+    handleWidth: number;
+    handleBarWidth: number;
+    handleBarHeight: number;
+};
+export declare const defaultLegendAdditionalItems: {
+    type: LegendItemType;
+    name: string;
+}[];

package/dist/configuration.d.ts

@@ -0,0 +1,48 @@
+import { AlluvialChartOptions, AreaChartOptions, AxisChartOptions, BarChartOptions, BaseChartOptions, BubbleChartOptions, BulletChartOptions, ChoroplethChartOptions, CirclePackChartOptions, ComboChartOptions, DonutChartOptions, GaugeChartOptions, HeatmapChartOptions, HistogramChartOptions, LineChartOptions, MeterChartOptions, PieChartOptions, ProportionalMeterChartOptions, RadarChartOptions, ScatterChartOptions, StackedBarChartOptions, ThematicChartOptions, TreeChartOptions, WorldCloudChartOptions } from './interfaces/charts';
+import { TimeScaleOptions } from './interfaces/axis-scales';
+import { GridOptions, RulerOptions, TooltipOptions } from './interfaces/components';
+/**
+ * Grid options
+ */
+export declare const grid: GridOptions;
+/**
+ * Ruler options
+ */
+export declare const ruler: RulerOptions;
+/**
+ * Tooltip options
+ */
+export declare const baseTooltip: TooltipOptions;
+export declare const timeScale: TimeScaleOptions;
+export declare const options: {
+    alluvialChart: AlluvialChartOptions;
+    areaChart: AreaChartOptions;
+    axisChart: AxisChartOptions;
+    boxplotChart: AxisChartOptions;
+    bubbleChart: BubbleChartOptions;
+    bulletChart: BulletChartOptions;
+    chart: BaseChartOptions;
+    circlePackChart: CirclePackChartOptions;
+    choroplethChart: ChoroplethChartOptions;
+    comboChart: ComboChartOptions;
+    donutChart: DonutChartOptions;
+    gaugeChart: GaugeChartOptions;
+    groupedBarChart: BarChartOptions;
+    heatmapChart: HeatmapChartOptions;
+    histogramChart: HistogramChartOptions;
+    lineChart: LineChartOptions;
+    lollipopChart: ScatterChartOptions;
+    meterChart: MeterChartOptions;
+    pieChart: PieChartOptions;
+    proportionalMeterChart: ProportionalMeterChartOptions;
+    radarChart: RadarChartOptions;
+    scatterChart: ScatterChartOptions;
+    simpleBarChart: BarChartOptions;
+    stackedAreaChart: AreaChartOptions;
+    stackedBarChart: StackedBarChartOptions;
+    thematicChart: ThematicChartOptions;
+    treeChart: TreeChartOptions;
+    treemapChart: BaseChartOptions;
+    wordCloudChart: WorldCloudChartOptions;
+};
+export { alluvial, area, axis, boxplot, canvasZoomSettings, carbonPrefix, circlePack, color, defaultLegendAdditionalItems, heatmap, histogram, legend, lines, meter, pie, radar, spacers, tooltips, transitions, toolbar, zoomBar } from './configuration-non-customizable';

package/dist/demo/charts/alluvial.d.ts

@@ -0,0 +1,109 @@
+export declare const alluvialSimpleData: {
+    source: string;
+    target: string;
+    value: number;
+}[];
+export declare const alluvialSimpleOptions: {
+    title: string;
+    alluvial: {
+        nodes: {
+            name: string;
+            category: string;
+        }[];
+    };
+    height: string;
+};
+export declare const alluvialSimpleCustomColorOptions: {
+    title: string;
+    color: {
+        scale: {
+            A: string;
+            B: string;
+            C: string;
+        };
+    };
+    alluvial: {
+        nodes: {
+            name: string;
+            category: string;
+        }[];
+    };
+    height: string;
+};
+export declare const alluvialGradientData: {
+    source: string;
+    target: string;
+    value: number;
+}[];
+export declare const alluvialSimpleGradientOptions: {
+    title: string;
+    color: {
+        scale: {
+            Cards: string;
+            'About Modal': string;
+            'Create Flow': string;
+            'Page Header': string;
+            Notifications: string;
+            'Data and AI, AI Apps': string;
+            'Data and AI, Info Architecture': string;
+            Security: string;
+            Automation: string;
+            'Public Cloud': string;
+        };
+        gradient: {
+            enabled: boolean;
+        };
+    };
+    alluvial: {
+        nodes: {
+            name: string;
+            category: string;
+        }[];
+    };
+    height: string;
+};
+export declare const alluvialMultipleCategoryOptions: {
+    title: string;
+    alluvial: {
+        nodes: {
+            name: string;
+            category: string;
+        }[];
+    };
+};
+export declare const alluvialMultipleCategoryData: {
+    source: string;
+    target: string;
+    value: number;
+}[];
+export declare const alluvialNodeAlignmentData: {
+    source: string;
+    target: string;
+    value: number;
+}[];
+export declare const alluvialNodeAlignmentOptions: {
+    title: string;
+    alluvial: {
+        nodes: {
+            name: string;
+            category: string;
+        }[];
+        nodeAlignment: string;
+    };
+};
+export declare const alluvialMonochromeData: {
+    source: string;
+    target: string;
+    value: number;
+}[];
+export declare const alluvialMonochromeOptions: {
+    title: string;
+    alluvial: {
+        nodes: {
+            name: string;
+            category: string;
+        }[];
+        monochrome: boolean;
+        nodePadding: number;
+    };
+};

package/dist/demo/charts/area.d.ts

@@ -0,0 +1,224 @@
+export declare const areaTimeSeriesData: {
+    group: string;
+    date: Date;
+    value: number;
+}[];
+export declare const areaTimeSeriesOptions: {
+    title: string;
+    axes: {
+        bottom: {
+            title: string;
+            mapsTo: string;
+            scaleType: string;
+        };
+        left: {
+            mapsTo: string;
+            title: string;
+            scaleType: string;
+        };
+    };
+};
+export declare const areaDiscreteDomain: {
+    group: string;
+    value: number;
+    key: string;
+}[];
+export declare const areaDiscreteDomainOptions: {
+    title: string;
+    axes: {
+        bottom: {
+            title: string;
+            mapsTo: string;
+            scaleType: string;
+        };
+        left: {
+            mapsTo: string;
+            title: string;
+            scaleType: string;
+        };
+    };
+};
+export declare const areaTimeSeriesCurvedData: {
+    group: string;
+    date: Date;
+    value: number;
+}[];
+export declare const sparklineTimeSeriesData: {
+    group: string;
+    date: number;
+    value: number;
+}[];
+export declare const areaTimeSeriesCurvedOptions: {
+    title: string;
+    axes: {
+        bottom: {
+            title: string;
+            mapsTo: string;
+            scaleType: string;
+        };
+        left: {
+            mapsTo: string;
+            scaleType: string;
+        };
+    };
+    curve: string;
+};
+export declare const sparklineOptions: {
+    title: string;
+    height: string;
+    grid: {
+        x: {
+            enabled: boolean;
+        };
+        y: {
+            enabled: boolean;
+        };
+    };
+    axes: {
+        bottom: {
+            visible: boolean;
+            title: string;
+            mapsTo: string;
+            scaleType: string;
+        };
+        left: {
+            visible: boolean;
+            mapsTo: string;
+            scaleType: string;
+        };
+    };
+    color: {
+        gradient: {
+            enabled: boolean;
+        };
+    };
+    points: {
+        enabled: boolean;
+    };
+    legend: {
+        enabled: boolean;
+    };
+};
+export declare const stackedAreaTimeSeriesData: {
+    group: string;
+    date: Date;
+    value: number;
+}[];
+export declare const stackedAreaTimeSeriesOptions: {
+    title: string;
+    axes: {
+        left: {
+            stacked: boolean;
+            scaleType: string;
+            mapsTo: string;
+        };
+        bottom: {
+            scaleType: string;
+            mapsTo: string;
+        };
+    };
+    curve: string;
+};
+export declare const stackedAreaTimeSeriesUnevenData: {
+    group: string;
+    date: Date;
+    value: number;
+}[];
+export declare const stackedAreaTimeSeriesUnevenDataOptions: {
+    title: string;
+    axes: {
+        left: {
+            stacked: boolean;
+        };
+        bottom: {
+            scaleType: string;
+            mapsTo: string;
+        };
+    };
+    curve: string;
+};
+export declare const stackedAreaPercentageTimeSeriesOptions: {
+    title: string;
+    axes: {
+        left: {
+            stacked: boolean;
+            percentage: boolean;
+            ticks: {
+                formatter: (d: any) => string;
+            };
+        };
+        bottom: {
+            scaleType: string;
+            mapsTo: string;
+        };
+    };
+    curve: string;
+};
+export declare const boundedAreaTimeSeriesData: {
+    group: string;
+    date: Date;
+    value: number;
+    min: number;
+    max: number;
+}[];
+export declare const boundedAreaTimeSeriesOptions: {
+    title: string;
+    legend: {
+        enabled: boolean;
+    };
+    bounds: {
+        upperBoundMapsTo: string;
+        lowerBoundMapsTo: string;
+    };
+    axes: {
+        bottom: {
+            title: string;
+            mapsTo: string;
+            scaleType: string;
+        };
+        left: {
+            mapsTo: string;
+            scaleType: string;
+        };
+    };
+    curve: string;
+};
+export declare const areaEmptyData: any[];
+export declare const areaEmptyOptions: {
+    title: string;
+    axes: {
+        left: {};
+        bottom: {
+            scaleType: string;
+        };
+    };
+};
+export declare const areaSkeletonData: {
+    group: string;
+    date: Date;
+    value: number;
+    min: number;
+    max: number;
+}[];
+export declare const areaSkeletonOptions: {
+    title: string;
+    bounds: {
+        upperBoundMapsTo: string;
+        lowerBoundMapsTo: string;
+    };
+    axes: {
+        bottom: {
+            title: string;
+            mapsTo: string;
+            scaleType: string;
+        };
+        left: {
+            mapsTo: string;
+            scaleType: string;
+        };
+    };
+    curve: string;
+    data: {
+        loading: boolean;
+    };
+};