@carbon/charts 0.27.0 → 0.29.1

package/src/components/layout/layout.js

@@ -0,0 +1,190 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+// Internal Imports
+import { Component } from "../component";
+import { LayoutDirection, LayoutGrowth } from "../../interfaces/index";
+import { Tools } from "../../tools";
+import { DOMUtils } from "../../services";
+// D3 Imports
+import { select } from "d3-selection";
+import { hierarchy, treemap, treemapSlice, treemapDice } from "d3-hierarchy";
+// TODO - What if there is no "growth" object?
+var LayoutComponent = /** @class */ (function (_super) {
+    __extends(LayoutComponent, _super);
+    function LayoutComponent(model, services, children, configs) {
+        var _this = _super.call(this, model, services, configs) || this;
+        _this.type = "layout";
+        _this.configs = configs;
+        _this.children = children;
+        _this._instanceID = LayoutComponent.instanceID++;
+        // Pass children data to the hierarchy layout
+        // And calculate sum of sizes
+        var directionIsReversed = (_this.configs.direction === LayoutDirection.ROW_REVERSE) ||
+            (_this.configs.direction === LayoutDirection.COLUMN_REVERSE);
+        if (directionIsReversed) {
+            _this.children = _this.children.reverse();
+        }
+        _this.init();
+        return _this;
+    }
+    LayoutComponent.prototype.init = function () {
+        this.children.forEach(function (child) {
+            child.components.forEach(function (component) {
+                component.init();
+            });
+        });
+    };
+    LayoutComponent.prototype.getPreferedAndFixedSizeSum = function () {
+        var svg = this.parent;
+        var sum = 0;
+        svg.selectAll("svg.layout-child-" + this._instanceID)
+            .filter(function (d) {
+            var growth = Tools.getProperty(d, "data", "growth", "x");
+            return growth === LayoutGrowth.PREFERRED || growth === LayoutGrowth.FIXED;
+        })
+            .each(function (d) {
+            sum += d.data.size;
+        });
+        return sum;
+    };
+    LayoutComponent.prototype.getNumOfStretchChildren = function () {
+        var svg = this.parent;
+        return svg.selectAll("svg.layout-child-" + this._instanceID)
+            .filter(function (d) {
+            var growth = Tools.getProperty(d, "data", "growth", "x");
+            return growth === LayoutGrowth.STRETCH;
+        })
+            .size();
+    };
+    LayoutComponent.prototype.render = function (animate) {
+        var _this = this;
+        if (animate === void 0) { animate = true; }
+        // Get parent SVG to render inside of
+        var svg = this.parent;
+        var _a = DOMUtils.getSVGElementSize(svg, { useAttrs: true }), width = _a.width, height = _a.height;
+        var root = hierarchy({
+            children: this.children
+        })
+            .sum(function (d) { return d.size; });
+        // Grab the correct treemap tile function based on direction
+        var tileType = (this.configs.direction === LayoutDirection.ROW || this.configs.direction === LayoutDirection.ROW_REVERSE)
+            ? treemapDice : treemapSlice;
+        // Compute the position of all elements within the layout
+        treemap()
+            .tile(tileType)
+            .size([width, height])(root);
+        // TODORF - Remove
+        var horizontal = (this.configs.direction === LayoutDirection.ROW || this.configs.direction === LayoutDirection.ROW_REVERSE);
+        // Add new SVGs to the DOM for each layout child
+        var updatedSVGs = svg.selectAll("svg.layout-child-" + this._instanceID)
+            .data(root.leaves(), function (d) { return d.data.id; });
+        updatedSVGs
+            .attr("width", function (d) { return d.x1 - d.x0; })
+            .attr("height", function (d) { return d.y1 - d.y0; });
+        var enteringSVGs = updatedSVGs
+            .enter()
+            .append("svg")
+            .attr("class", function (d) { return "layout-child layout-child-" + _this._instanceID + " " + d.data.id; })
+            .attr("x", function (d) { return d.x0; })
+            .attr("y", function (d) { return d.y0; });
+        enteringSVGs.merge(svg.selectAll("svg.layout-child-" + this._instanceID))
+            .each(function (d) {
+            var _this = this;
+            // Set parent component for each child
+            d.data.components.forEach(function (itemComponent) {
+                itemComponent.setParent(select(_this));
+                // Render preffered & fixed items
+                var growth = Tools.getProperty(d, "data", "growth", "x");
+                if (growth === LayoutGrowth.PREFERRED || growth === LayoutGrowth.FIXED) {
+                    itemComponent.render(animate);
+                }
+            });
+        });
+        svg.selectAll("svg.layout-child-" + this._instanceID)
+            .each(function (d) {
+            // Calculate preffered children sizes after internal rendering
+            var growth = Tools.getProperty(d, "data", "growth", "x");
+            var matchingSVGDimensions = DOMUtils.getSVGElementSize(select(this), { useBBox: true });
+            if (growth === LayoutGrowth.PREFERRED) {
+                var matchingSVGWidth = horizontal ? matchingSVGDimensions.width : matchingSVGDimensions.height;
+                var svgWidth = horizontal ? width : height;
+                d.data.size = (matchingSVGWidth / svgWidth) * 100;
+            }
+        });
+        updatedSVGs
+            .exit()
+            .remove();
+        // Run through stretch x-items
+        this.children
+            .filter(function (child) {
+            var growth = Tools.getProperty(child, "growth", "x");
+            return growth === LayoutGrowth.STRETCH;
+        })
+            .forEach(function (child, i) {
+            child.size = (100 - (+_this.getPreferedAndFixedSizeSum())) / (+_this.getNumOfStretchChildren());
+        });
+        // Pass children data to the hierarchy layout
+        // And calculate sum of sizes
+        root = hierarchy({
+            children: this.children
+        })
+            .sum(function (d) { return d.size; });
+        // Compute the position of all elements within the layout
+        treemap()
+            .tile(tileType)
+            .size([width, height])
+            .padding(0)(root);
+        // Add new SVGs to the DOM for each layout child
+        svg
+            .selectAll("svg.layout-child-" + this._instanceID)
+            .data(root.leaves(), function (d) { return d.data.id; })
+            .attr("x", function (d) { return d.x0; })
+            .attr("y", function (d) { return d.y0; })
+            .attr("width", function (d) { return d.x1 - d.x0; })
+            .attr("height", function (d) { return d.y1 - d.y0; })
+            .each(function (d, i) {
+            d.data.components.forEach(function (itemComponent) {
+                var growth = Tools.getProperty(d, "data", "growth", "x");
+                if (growth === LayoutGrowth.STRETCH) {
+                    itemComponent.render(animate);
+                }
+            });
+        });
+    };
+    // Pass on model to children as well
+    LayoutComponent.prototype.setModel = function (newObj) {
+        _super.prototype.setModel.call(this, newObj);
+        this.children.forEach(function (child) {
+            child.components.forEach(function (component) { return component.setModel(newObj); });
+        });
+    };
+    // Pass on essentials to children as well
+    LayoutComponent.prototype.setServices = function (newObj) {
+        _super.prototype.setServices.call(this, newObj);
+        this.children.forEach(function (child) {
+            child.components.forEach(function (component) { return component.setServices(newObj); });
+        });
+    };
+    LayoutComponent.prototype.destroy = function () {
+        this.children.forEach(function (child) {
+            child.components.forEach(function (component) { return component.destroy(); });
+        });
+    };
+    // Give every layout component a distinct ID
+    // so they don't interfere when querying elements
+    LayoutComponent.instanceID = Math.floor(Math.random() * 99999999999);
+    return LayoutComponent;
+}(Component));
+export { LayoutComponent };
+//# sourceMappingURL=../../../../src/components/layout/layout.js.map

package/src/components/layout/spacer.js

@@ -0,0 +1,35 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+// Internal Imports
+import { Component } from "../component";
+import * as Configuration from "../../configuration";
+var Spacer = /** @class */ (function (_super) {
+    __extends(Spacer, _super);
+    function Spacer() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.type = "spacer";
+        return _this;
+    }
+    Spacer.prototype.render = function () {
+        this.getContainerSVG().append("rect")
+            .attr("x", 0)
+            .attr("y", 0)
+            .attr("width", this.configs.size || Configuration.spacers.default.size)
+            .attr("height", this.configs.size || Configuration.spacers.default.size)
+            .attr("opacity", 0);
+    };
+    return Spacer;
+}(Component));
+export { Spacer };
+//# sourceMappingURL=../../../../src/components/layout/spacer.js.map

package/src/configuration.d.ts

@@ -0,0 +1,67 @@
+import { BaseChartOptions, AxisChartOptions, ScatterChartOptions, LineChartOptions, BarChartOptions, StackedBarChartOptions, PieChartOptions, DonutChartOptions, BubbleChartOptions, GridOptions, TooltipOptions, AxisTooltipOptions, BarTooltipOptions, LegendOptions } from "./interfaces/index";
+/**
+ * Legend options
+ */
+export declare const legend: LegendOptions;
+/**
+ * Grid options
+ */
+export declare const grid: GridOptions;
+/**
+ * Tooltip options
+ */
+export declare const baseTooltip: TooltipOptions;
+export declare const axisChartTooltip: AxisTooltipOptions;
+export declare const barChartTooltip: BarTooltipOptions;
+export declare const options: {
+    chart: BaseChartOptions;
+    axisChart: AxisChartOptions;
+    simpleBarChart: BarChartOptions;
+    groupedBarChart: BarChartOptions;
+    stackedBarChart: StackedBarChartOptions;
+    bubbleChart: BubbleChartOptions;
+    lineChart: LineChartOptions;
+    scatterChart: ScatterChartOptions;
+    pieChart: PieChartOptions;
+    donutChart: DonutChartOptions;
+};
+/**
+ * Options for line behaviour
+ */
+export declare const lines: {
+    opacity: {
+        unselected: number;
+        selected: 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 axis: {
+    ticks: {
+        number: number;
+        rotateIfSmallerThan: number;
+    };
+};
+export declare const spacers: {
+    default: {
+        size: number;
+    };
+};

package/src/configuration.js

@@ -0,0 +1,250 @@
+import { Tools } from "./tools";
+import { LegendPositions } from "./interfaces/index";
+/*
+ *****************************
+ * User configurable options *
+ *****************************
+ */
+/**
+ * Legend options
+ */
+export var legend = {
+    position: LegendPositions.BOTTOM,
+    clickable: true,
+    enabled: true,
+    items: {
+        status: {
+            ACTIVE: 1,
+            DISABLED: 0
+        },
+        horizontalSpace: 12,
+        verticalSpace: 24,
+        textYOffset: 8
+    },
+    checkbox: {
+        radius: 6.5,
+        spaceAfter: 4
+    }
+};
+/**
+ * Grid options
+ */
+export var grid = {
+    x: {
+        numberOfTicks: 5
+    },
+    y: {
+        numberOfTicks: 5
+    }
+};
+/**
+ * Tooltip options
+ */
+export var baseTooltip = {
+    datapoint: {
+        horizontalOffset: 10,
+        enabled: true,
+    },
+    title: {
+        verticalOffset: .75,
+        width: .4
+    }
+};
+export var axisChartTooltip = Tools.merge({}, baseTooltip, {
+    gridline: {
+        enabled: true,
+        threshold: 0.25
+    }
+});
+export var barChartTooltip = Tools.merge({}, axisChartTooltip, {
+    datapoint: {
+        verticalOffset: 4
+    },
+    gridline: {
+        enabled: false
+    }
+});
+// We setup no axes by default, the TwoDimensionalAxes component
+// Will setup axes options based on what user provides
+var axes = {};
+var timeScale = {
+    addSpaceOnEdges: 1,
+};
+/**
+ * Base chart options common to any chart
+ */
+var chart = {
+    width: "100%",
+    height: "100%",
+    resizable: true,
+    tooltip: baseTooltip,
+    legend: legend,
+    style: {
+        prefix: "cc"
+    }
+};
+/**
+ * Options common to any chart with an axis
+ */
+var axisChart = Tools.merge({}, chart, {
+    axes: axes,
+    timeScale: timeScale,
+    grid: grid,
+    tooltip: axisChartTooltip
+});
+/**
+ * options specific to simple bar charts
+ */
+var baseBarChart = Tools.merge({}, axisChart, {
+    bars: {
+        maxWidth: 16
+    },
+    timeScale: Tools.merge(timeScale, {
+        addSpaceOnEdges: 1
+    }),
+    tooltip: barChartTooltip,
+});
+/**
+ * options specific to simple bar charts
+ */
+var simpleBarChart = Tools.merge({}, baseBarChart, {});
+/**
+ * options specific to simple bar charts
+ */
+var groupedBarChart = Tools.merge({}, baseBarChart, {});
+/**
+ * options specific to stacked bar charts
+ */
+var stackedBarChart = Tools.merge({}, baseBarChart, {
+    bars: Tools.merge({}, baseBarChart.bars, {
+        dividerSize: 1.5
+    })
+});
+/**
+ * options specific to line charts
+ */
+var lineChart = Tools.merge({}, axisChart, {
+    points: {
+        // default point radius to 3
+        radius: 3,
+        filled: false
+    }
+});
+/**
+ * options specific to scatter charts
+ */
+var scatterChart = Tools.merge({}, axisChart, {
+    points: {
+        // default point radius to 4
+        radius: 4,
+        fillOpacity: 0.3,
+        filled: true
+    }
+});
+/**
+ * options specific to bubble charts
+ */
+var bubbleChart = Tools.merge({}, axisChart, {
+    bubble: {
+        radiusRange: function (chartSize, data) {
+            var smallerChartDimension = Math.min(chartSize.width, chartSize.height);
+            return [
+                smallerChartDimension * 3 / 400,
+                smallerChartDimension * 25 / 400
+            ];
+        },
+        fillOpacity: 0.2
+    }
+});
+/**
+ * options specific to pie charts
+ */
+var pieChart = Tools.merge({}, chart, {
+    pie: {
+        radiusOffset: -15,
+        innerRadius: 2,
+        padAngle: 0.007,
+        hoverArc: {
+            outerRadiusOffset: 3
+        },
+        xOffset: 30,
+        yOffset: 20,
+        yOffsetCallout: 10,
+        callout: {
+            minSliceDegree: 5,
+            offsetX: 15,
+            offsetY: 12,
+            horizontalLineLength: 8,
+            textMargin: 2
+        },
+        labels: {
+            formatter: null
+        }
+    }
+});
+/**
+ * options specific to donut charts
+ */
+var donutChart = Tools.merge({}, pieChart, {
+    donut: {
+        center: {
+            numberFontSize: function (radius) { return Math.min((radius / 100) * 24, 24) + "px"; },
+            titleFontSize: function (radius) { return Math.min((radius / 100) * 15, 15) + "px"; },
+            titleYPosition: function (radius) { return Math.min((radius / 80) * 20, 20); },
+            numberFormatter: function (number) { return Math.floor(number).toLocaleString(); }
+        }
+    }
+});
+export var options = {
+    chart: chart,
+    axisChart: axisChart,
+    simpleBarChart: simpleBarChart,
+    groupedBarChart: groupedBarChart,
+    stackedBarChart: stackedBarChart,
+    bubbleChart: bubbleChart,
+    lineChart: lineChart,
+    scatterChart: scatterChart,
+    pieChart: pieChart,
+    donutChart: donutChart
+};
+/**
+ * Options for line behaviour
+ */
+export var lines = {
+    opacity: {
+        unselected: 0.3,
+        selected: 1
+    }
+};
+/**
+ * Base transition configuration
+ */
+export var transitions = {
+    default: {
+        duration: 300
+    },
+    pie_slice_mouseover: {
+        duration: 100
+    },
+    pie_chart_titles: {
+        duration: 375
+    },
+    graph_element_mouseover_fill_update: {
+        duration: 100
+    },
+    graph_element_mouseout_fill_update: {
+        duration: 100
+    }
+};
+export var axis = {
+    ticks: {
+        number: 7,
+        rotateIfSmallerThan: 30
+    }
+};
+export var spacers = {
+    default: {
+        size: 24
+    }
+};
+//# sourceMappingURL=../../src/configuration.js.map

package/src/configuration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"configuration.js","sourceRoot":"","sources":["configuration.ts"],"names":[],"mappings":"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","sourcesContent":["import { Tools } from \"./tools\";\nimport {\n\tBaseChartOptions,\n\tAxisChartOptions,\n\tScatterChartOptions,\n\tLineChartOptions,\n\tBarChartOptions,\n\tStackedBarChartOptions,\n\tPieChartOptions,\n\tDonutChartOptions,\n\tBubbleChartOptions,\n\t// Components\n\tGridOptions,\n\tAxesOptions,\n\tTimeScaleOptions,\n\tTooltipOptions,\n\tAxisTooltipOptions,\n\tBarTooltipOptions,\n\tLegendOptions,\n\tChartTheme,\n\tLegendPositions,\n\tStackedBarOptions\n} from \"./interfaces/index\";\n\n/*\n *****************************\n * User configurable options *\n *****************************\n */\n\n/**\n * Legend options\n */\nexport const legend: LegendOptions = {\n\tposition: LegendPositions.BOTTOM,\n\tclickable: true,\n\tenabled: true,\n\titems: {\n\t\tstatus: {\n\t\t\tACTIVE: 1,\n\t\t\tDISABLED: 0\n\t\t},\n\t\thorizontalSpace: 12,\n\t\tverticalSpace: 24,\n\t\ttextYOffset: 8\n\t},\n\tcheckbox: {\n\t\tradius: 6.5,\n\t\tspaceAfter: 4\n\t}\n};\n\n/**\n * Grid options\n */\nexport const grid: GridOptions = {\n\tx: {\n\t\tnumberOfTicks: 5\n\t},\n\ty: {\n\t\tnumberOfTicks: 5\n\t}\n};\n\n/**\n * Tooltip options\n */\nexport const baseTooltip: TooltipOptions = {\n\tdatapoint: {\n\t\thorizontalOffset: 10,\n\t\tenabled: true,\n\t},\n\ttitle: {\n\t\tverticalOffset: .75,\n\t\twidth: .4\n\t}\n};\n\nexport const axisChartTooltip: AxisTooltipOptions = Tools.merge({}, baseTooltip, {\n\tgridline: {\n\t\tenabled: true,\n\t\tthreshold: 0.25\n\t}\n} as AxisTooltipOptions);\n\nexport const barChartTooltip: BarTooltipOptions = Tools.merge({}, axisChartTooltip , {\n\tdatapoint: {\n\t\tverticalOffset: 4\n\t},\n\tgridline: {\n\t\tenabled: false\n\t}\n} as BarTooltipOptions);\n\n// We setup no axes by default, the TwoDimensionalAxes component\n// Will setup axes options based on what user provides\nconst axes: AxesOptions = { };\n\nconst timeScale: TimeScaleOptions = {\n\taddSpaceOnEdges: 1,\n};\n\n/**\n * Base chart options common to any chart\n */\nconst chart: BaseChartOptions = {\n\twidth: \"100%\",\n\theight: \"100%\",\n\tresizable: true,\n\ttooltip: baseTooltip,\n\tlegend,\n\tstyle: {\n\t\tprefix: \"cc\"\n\t}\n};\n\n/**\n * Options common to any chart with an axis\n */\nconst axisChart: AxisChartOptions = Tools.merge({}, chart, {\n\taxes,\n\ttimeScale,\n\tgrid,\n\ttooltip: axisChartTooltip\n} as AxisChartOptions);\n\n/**\n * options specific to simple bar charts\n */\nconst baseBarChart: BarChartOptions = Tools.merge({}, axisChart, {\n\tbars: {\n\t\tmaxWidth: 16\n\t},\n\ttimeScale: Tools.merge(timeScale, {\n\t\taddSpaceOnEdges: 1\n\t} as TimeScaleOptions),\n\ttooltip: barChartTooltip,\n} as BarChartOptions);\n\n/**\n * options specific to simple bar charts\n */\nconst simpleBarChart: BarChartOptions = Tools.merge({}, baseBarChart, {\n\n} as BarChartOptions);\n\n/**\n * options specific to simple bar charts\n */\nconst groupedBarChart: BarChartOptions = Tools.merge({}, baseBarChart, {\n\n} as BarChartOptions);\n\n/**\n * options specific to stacked bar charts\n */\nconst stackedBarChart: StackedBarChartOptions = Tools.merge({}, baseBarChart, {\n\tbars: Tools.merge({}, baseBarChart.bars, {\n\t\tdividerSize: 1.5\n\t} as StackedBarOptions)\n} as BarChartOptions);\n\n/**\n * options specific to line charts\n */\nconst lineChart: LineChartOptions = Tools.merge({}, axisChart, {\n\tpoints: {\n\t\t// default point radius to 3\n\t\tradius: 3,\n\t\tfilled: false\n\t}\n} as LineChartOptions);\n\n/**\n * options specific to scatter charts\n */\nconst scatterChart: ScatterChartOptions = Tools.merge({}, axisChart, {\n\tpoints: {\n\t\t// default point radius to 4\n\t\tradius: 4,\n\t\tfillOpacity: 0.3,\n\t\tfilled: true\n\t}\n} as ScatterChartOptions);\n\n/**\n * options specific to bubble charts\n */\nconst bubbleChart: BubbleChartOptions = Tools.merge({}, axisChart, {\n\tbubble: {\n\t\tradiusRange: (chartSize, data) => {\n\t\t\tconst smallerChartDimension = Math.min(chartSize.width, chartSize.height);\n\t\t\treturn [\n\t\t\t\tsmallerChartDimension * 3 / 400,\n\t\t\t\tsmallerChartDimension * 25 / 400\n\t\t\t];\n\t\t},\n\t\tfillOpacity: 0.2\n\t}\n} as BubbleChartOptions);\n\n/**\n * options specific to pie charts\n */\nconst pieChart: PieChartOptions = Tools.merge({}, chart, {\n\tpie: {\n\t\tradiusOffset: -15,\n\t\tinnerRadius: 2,\n\t\tpadAngle: 0.007,\n\t\thoverArc: {\n\t\t\touterRadiusOffset: 3\n\t\t},\n\t\txOffset: 30,\n\t\tyOffset: 20,\n\t\tyOffsetCallout: 10,\n\t\tcallout: {\n\t\t\tminSliceDegree: 5,\n\t\t\toffsetX: 15,\n\t\t\toffsetY: 12,\n\t\t\thorizontalLineLength: 8,\n\t\t\ttextMargin: 2\n\t\t},\n\t\tlabels: {\n\t\t\tformatter: null\n\t\t}\n\t}\n} as PieChartOptions);\n\n/**\n * options specific to donut charts\n */\nconst donutChart: DonutChartOptions = Tools.merge({}, pieChart, {\n\tdonut: {\n\t\tcenter: {\n\t\t\tnumberFontSize: radius => Math.min((radius / 100) * 24, 24) + \"px\",\n\t\t\ttitleFontSize: radius => Math.min((radius / 100) * 15, 15) + \"px\",\n\t\t\ttitleYPosition: radius => Math.min((radius / 80) * 20, 20),\n\t\t\tnumberFormatter: number => Math.floor(number).toLocaleString()\n\t\t}\n\t}\n} as DonutChartOptions);\n\nexport const options = {\n\tchart,\n\taxisChart,\n\tsimpleBarChart,\n\tgroupedBarChart,\n\tstackedBarChart,\n\tbubbleChart,\n\tlineChart,\n\tscatterChart,\n\tpieChart,\n\tdonutChart\n};\n\n/**\n * Options for line behaviour\n */\nexport const lines = {\n\topacity: {\n\t\tunselected: 0.3,\n\t\tselected: 1\n\t}\n};\n\n/**\n * Base transition configuration\n */\nexport const transitions = {\n\tdefault: {\n\t\tduration: 300\n\t},\n\tpie_slice_mouseover: {\n\t\tduration: 100\n\t},\n\tpie_chart_titles: {\n\t\tduration: 375\n\t},\n\tgraph_element_mouseover_fill_update: {\n\t\tduration: 100\n\t},\n\tgraph_element_mouseout_fill_update: {\n\t\tduration: 100\n\t}\n};\n\nexport const axis = {\n\tticks: {\n\t\tnumber: 7,\n\t\trotateIfSmallerThan: 30\n\t}\n};\n\nexport const spacers = {\n\tdefault: {\n\t\tsize: 24\n\t}\n};\n"]}

package/src/index.d.ts

@@ -0,0 +1,6 @@
+import { SimpleBarChart, GroupedBarChart, StackedBarChart, BubbleChart, LineChart, ScatterChart, PieChart, DonutChart } from "./charts/index";
+import * as configurations from "./configuration";
+import * as interfaces from "./interfaces";
+import * as colorPalettes from "./services/colorPalettes";
+declare const defaultColors: any[];
+export { interfaces, configurations, defaultColors, colorPalettes, SimpleBarChart, GroupedBarChart, StackedBarChart, BubbleChart, LineChart, ScatterChart, PieChart, DonutChart };

package/src/index.js

@@ -0,0 +1,9 @@
+import { SimpleBarChart, GroupedBarChart, StackedBarChart, BubbleChart, LineChart, ScatterChart, PieChart, DonutChart, } from "./charts/index";
+// Configs & interfaces
+import * as configurations from "./configuration";
+import * as interfaces from "./interfaces";
+import * as colorPalettes from "./services/colorPalettes";
+// TODO 1.0 - Remove deprecated API
+var defaultColors = colorPalettes.DEFAULT;
+export { interfaces, configurations, defaultColors, colorPalettes, SimpleBarChart, GroupedBarChart, StackedBarChart, BubbleChart, LineChart, ScatterChart, PieChart, DonutChart };
+//# sourceMappingURL=../../src/index.js.map

package/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,cAAc,EACd,eAAe,EACf,eAAe,EACf,WAAW,EACX,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,UAAU,GACV,MAAM,gBAAgB,CAAC;AAExB,uBAAuB;AACvB,OAAO,KAAK,cAAc,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC;AAE3C,OAAO,KAAK,aAAa,MAAM,0BAA0B,CAAC;AAC1D,mCAAmC;AACnC,IAAM,aAAa,GAAG,aAAa,CAAC,OAAO,CAAC;AAE5C,OAAO,EACN,UAAU,EACV,cAAc,EACd,aAAa,EACb,aAAa,EACb,cAAc,EACd,eAAe,EACf,eAAe,EACf,WAAW,EACX,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,CAAC","sourcesContent":["import {\n\tSimpleBarChart,\n\tGroupedBarChart,\n\tStackedBarChart,\n\tBubbleChart,\n\tLineChart,\n\tScatterChart,\n\tPieChart,\n\tDonutChart,\n} from \"./charts/index\";\n\n// Configs & interfaces\nimport * as configurations from \"./configuration\";\nimport * as interfaces from \"./interfaces\";\n\nimport * as colorPalettes from \"./services/colorPalettes\";\n// TODO 1.0 - Remove deprecated API\nconst defaultColors = colorPalettes.DEFAULT;\n\nexport {\n\tinterfaces,\n\tconfigurations,\n\tdefaultColors,\n\tcolorPalettes,\n\tSimpleBarChart,\n\tGroupedBarChart,\n\tStackedBarChart,\n\tBubbleChart,\n\tLineChart,\n\tScatterChart,\n\tPieChart,\n\tDonutChart\n};\n"]}

package/src/interfaces/a11y.js

@@ -0,0 +1,8 @@
+export var Roles;
+(function (Roles) {
+    Roles["GRAPHICS_DOCUMENT"] = "graphics-document";
+    Roles["GRAPHICS_OBJECT"] = "graphics-object";
+    Roles["GRAPHICS_SYMBOL"] = "graphics-symbol";
+    Roles["GROUP"] = "group";
+})(Roles || (Roles = {}));
+//# sourceMappingURL=../../../src/interfaces/a11y.js.map

package/src/interfaces/axis-scales.d.ts

@@ -0,0 +1,71 @@
+import { ScaleTypes } from "./enums";
+/**
+ * options to configure a scale. not all options are used by all scales
+ */
+export interface AxisOptions {
+    /**
+     * type of the scale used on axis
+     */
+    scaleType?: ScaleTypes;
+    /**
+     * Whether the Axis should be used as the domain
+     * axis of the chart. In the case of Cartesian Scales
+     * you would expect to only have 1 axis (dimension) being used as domain
+     * Domain usually represents labels, ordinal values, time intervals etc.
+     */
+    useAsDomain?: boolean;
+    /**
+     * Whether the Axis should be used as the range
+     * axis of the chart. In the case of Cartesian Scales
+     * you would expect to only have 1 axis (dimension) being used as range
+     * Range usually follows a linear scale
+     */
+    useAsRange?: boolean;
+    primary?: boolean;
+    secondary?: boolean;
+    /**
+     * optional title for the scales
+     */
+    title?: string;
+    /**
+     * tick configuration
+     */
+    ticks?: {
+        /**
+         * number of ticks to show
+         */
+        number?: number;
+        /**
+         * minimum tick value
+         */
+        min?: number;
+        /**
+         * maximum tick value
+         */
+        max?: number;
+        /**
+         * minimum width of a tick
+         * before getting rotated (in pixels)
+         */
+        rotateIfSmallerThan?: number;
+        /**
+         * function to format the ticks
+         */
+        formatter?: Function;
+    };
+}
+/**
+ * customize the axes components
+ */
+export interface AxesOptions {
+    left?: AxisOptions;
+    bottom?: AxisOptions;
+    right?: AxisOptions;
+    top?: AxisOptions;
+}
+/**
+ * customize time series scales
+ */
+export interface TimeScaleOptions {
+    addSpaceOnEdges?: number;
+}