@accurat/chart-library - npm Package Compare versions

Comparing version 0.8.0-beta.13 to 0.8.0-beta.14

dist/components/axis/axes.d.ts

@@ -31,6 +31,7 @@ /// <reference types="react" />
     };
+    rotateXTicks?: boolean;
     padding?: Partial<AxisPadding>;
     categoricalGridStyle?: CategoricalGridOptions;
 }
-export declare const Axes: ({ appearanceConfig, axesConfig, realDimensions, columnNames, columnTypes, xScale, yScale, visibleXAxis, visibleYAxisAndLabels, margin, categoriesMap, showGrid, showAxes, ticks: ticks, padding: partialPadding, categoricalGridStyle, }: Props) => JSX.Element;
+export declare const Axes: ({ appearanceConfig, axesConfig, realDimensions, columnNames, columnTypes, xScale, yScale, visibleXAxis, visibleYAxisAndLabels, margin, categoriesMap, showGrid, showAxes, ticks: ticks, padding: partialPadding, categoricalGridStyle, rotateXTicks, }: Props) => JSX.Element;
 export {};

dist/components/axis/axes.js

@@ -21,2 +21,3 @@ var __assign = (this && this.__assign) || function () {
 var getFullPadding = function (options) { return (__assign(__assign({}, defaultPadding), options)); };
+var getRotatedXTicksAlignment = function (rotation) { return (rotation > 0 ? 'start' : 'end'); };
 var getXTicksAlignment = function (alignment) {
@@ -62,3 +63,3 @@ return ({
 export var Axes = function (_a) {
-    var appearanceConfig = _a.appearanceConfig, axesConfig = _a.axesConfig, realDimensions = _a.realDimensions, columnNames = _a.columnNames, columnTypes = _a.columnTypes, xScale = _a.xScale, yScale = _a.yScale, _b = _a.visibleXAxis, visibleXAxis = _b === void 0 ? true : _b, _c = _a.visibleYAxisAndLabels, visibleYAxisAndLabels = _c === void 0 ? true : _c, margin = _a.margin, categoriesMap = _a.categoriesMap, _d = _a.showGrid, showGrid = _d === void 0 ? true : _d, _e = _a.showAxes, showAxes = _e === void 0 ? true : _e, ticks = _a.ticks, _f = _a.padding, partialPadding = _f === void 0 ? {} : _f, _g = _a.categoricalGridStyle, categoricalGridStyle = _g === void 0 ? 'center' : _g;
+    var appearanceConfig = _a.appearanceConfig, axesConfig = _a.axesConfig, realDimensions = _a.realDimensions, columnNames = _a.columnNames, columnTypes = _a.columnTypes, xScale = _a.xScale, yScale = _a.yScale, _b = _a.visibleXAxis, visibleXAxis = _b === void 0 ? true : _b, _c = _a.visibleYAxisAndLabels, visibleYAxisAndLabels = _c === void 0 ? true : _c, margin = _a.margin, categoriesMap = _a.categoriesMap, _d = _a.showGrid, showGrid = _d === void 0 ? true : _d, _e = _a.showAxes, showAxes = _e === void 0 ? true : _e, ticks = _a.ticks, _f = _a.padding, partialPadding = _f === void 0 ? {} : _f, _g = _a.categoricalGridStyle, categoricalGridStyle = _g === void 0 ? 'center' : _g, _h = _a.rotateXTicks, rotateXTicks = _h === void 0 ? false : _h;
     // Backward compatibility
@@ -120,9 +121,16 @@ var xTicks = ticks.xTicks, yTicks = ticks.yTicks, xTicksFormatted = ticks.xTicksFormatted, yTicksFormatted = ticks.yTicksFormatted;
             xLabels.map(function (x, i) {
+                var rotationAngle = rotateXTicks ? appearanceConfig.axesTicksRotation.angle.value : 0;
                 var offsetX = appearanceConfig.axesTicksFontStyle.textOffsetX.value;
                 var showTick = x >= xScale.range()[0] && x <= xScale.range()[1];
                 var formattedXTick = xTicksFormatted[i];
-                var textAnchor = getXTicksAlignment(xTicksTextAlignment);
+                var textAnchor = rotateXTicks
+                    ? getRotatedXTicksAlignment(rotationAngle)
+                    : getXTicksAlignment(xTicksTextAlignment);
                 var ticksStrokeWidth = Math.max(1, primaryGridVertLineStyle.strokeWidth);
+                var tickX = x + offsetX;
+                var tickY = realDimensions.height + TICK_LABEL_SPACING;
                 return (React.createElement("g", { key: i, className: "ticks" },
-                    showTick && (React.createElement("text", { x: x + offsetX, y: realDimensions.height + TICK_LABEL_SPACING, textAnchor: textAnchor, dominantBaseline: "hanging", style: fontConfigToStyle(appearanceConfig.axesTicksFontStyle) }, formattedXTick)),
+                    showTick && (React.createElement("g", { transform: "translate(" + tickX + " " + tickY + ")" },
+                        React.createElement("g", { transform: "rotate(" + rotationAngle + ") " },
+                            React.createElement("text", { textAnchor: textAnchor, dominantBaseline: "hanging", style: fontConfigToStyle(appearanceConfig.axesTicksFontStyle) }, formattedXTick)))),
                     showTicksX && (React.createElement("line", { x1: x, y1: realDimensions.height, x2: x, y2: realDimensions.height + ticksLengthX, strokeLinecap: "square", stroke: primaryGridVertLineStyle.fill, strokeWidth: ticksStrokeWidth, strokeOpacity: primaryGridVertLineStyle.fillOpacity }))));
@@ -129,0 +137,0 @@ })),

dist/components/barchart/barchart-grouped-base.js

@@ -26,3 +26,3 @@ var __read = (this && this.__read) || function (o, n) {
 import { extent } from 'd3-array';
-import { computeHeights, computeHorizontalPadding, computeVerticalPadding, computeBarPadding, computeChartInnerRanges, appearanceMarginToMargin, } from '../../lib/chart-utils';
+import { computeHeights, computeHorizontalPadding, computeVerticalPadding, appearanceMarginToMargin, } from '../../lib/chart-utils';
 import { DebugStructures } from '../debug/debug';
@@ -38,3 +38,3 @@ import { TitleAndDescription } from '../title-and-description';
 import { lineConfigToStyle } from '../../lib/style-utils';
-import { getBarchartAxis, sanitizeBarchartAppearanceConfig } from './barchart-utils';
+import { buildBarchartScales, getBarchartAxis, sanitizeBarchartAppearanceConfig, } from './barchart-utils';
 import { useFilterableDataset } from '../common/use-filterable-dataset';
@@ -103,3 +103,3 @@ import { InteractivityLayer, TooltipContainer } from '../interactivity-layer/interactivity-layer';
     var titleAndDescriptionHeight = hTitle + hDescription;
-    var chartDimensionWithMargins = {
+    var availableDimensions = {
         width: contentWidth - padding.left,
@@ -119,23 +119,6 @@ height: contentHeight - padding.bottom,
     var colors = columnNames.color ? colorPalette : [uncategorizedColor];
-    var _o = computeChartInnerRanges(chartDimensionWithMargins, appearanceConfig), xRange = _o.xRange, yRange = _o.yRange;
-    var distributionRange = isVertical ? xRange : yRange;
-    var lengthRange = isVertical ? yRange : xRange;
-    var lengthScale = scaleLinear()
-        .domain([minLength, maxLength])
-        .range(lengthRange);
-    var barStyle = lineConfigToStyle(appearanceConfig.outline);
-    var distributionSpace = isVertical
-        ? chartDimensionWithMargins.width
-        : chartDimensionWithMargins.height;
-    var barPadding = computeBarPadding(distributionSpace, groups.length, numberOfBarsPerGroup, appearanceConfig);
-    var distributionGroupScale = scaleBand()
-        .domain(groups)
-        .range(distributionRange)
-        .paddingInner(barPadding.inner)
-        .paddingOuter(barPadding.outer);
-    var distributionBarScale = scaleBand()
-        .domain(categories)
-        .range([0, distributionGroupScale.bandwidth()]);
-    var xScale = isVertical ? distributionGroupScale : lengthScale;
-    var yScale = isVertical ? lengthScale : distributionGroupScale;
+    var lengthInfo = { domain: [minLength, maxLength] };
+    var distributionInfo = { groups: groups, categories: categories };
+    var scales = buildBarchartScales(isVertical, availableDimensions, lengthInfo, distributionInfo, ticks, appearanceConfig);
+    var xScale = scales.xScale, yScale = scales.yScale, chartDimensionWithMargins = scales.chartDimensions, distributionBarScale = scales.distributionBarScale, distributionGroupScale = scales.distributionGroupScale, lengthScale = scales.lengthScale;
     var colorScale = scaleOrdinal()
@@ -157,2 +140,3 @@ .domain(categories)
     };
+    var barStyle = lineConfigToStyle(appearanceConfig.outline);
     var findHoveredDatum = buildRectFinder(rectData);
@@ -168,3 +152,3 @@ return (React.createElement(TooltipContainer, null,
                     React.createElement("g", { transform: "translate(" + padding.left + ",0)" },
-                        React.createElement(Axes, { appearanceConfig: appearanceConfig, moments: moments, axesConfig: axesConfig, formatter: formatter, realDimensions: chartDimensionWithMargins, columnNames: columnNames, columnTypes: columnTypes, xScale: xScale, yScale: yScale, margin: margin, data: data, categoriesMap: categoriesMap, ticks: ticks, padding: padding, categoricalGridStyle: appearanceConfig.barchartCategroricalGridPosition.value })),
+                        React.createElement(Axes, { appearanceConfig: appearanceConfig, moments: moments, axesConfig: axesConfig, formatter: formatter, realDimensions: chartDimensionWithMargins, columnNames: columnNames, columnTypes: columnTypes, xScale: xScale, yScale: yScale, margin: margin, data: data, categoriesMap: categoriesMap, ticks: ticks, padding: padding, categoricalGridStyle: appearanceConfig.barchartCategroricalGridPosition.value, rotateXTicks: availableDimensions.height > chartDimensionWithMargins.height })),
                     React.createElement(Frame, { appearanceConfig: appearanceConfig, axesConfig: axesConfig, dimensions: {
@@ -171,0 +155,0 @@ width: contentWidth,

dist/components/barchart/barchart-stacked-base.js

@@ -0,1 +1,12 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __read = (this && this.__read) || function (o, n) {
@@ -29,3 +40,3 @@ var m = typeof Symbol === "function" && o[Symbol.iterator];
 import { Axes } from '../axis/axes';
-import { computeHeights, computeHorizontalPadding, computeVerticalPadding, computeBarPadding, computeChartInnerRanges, appearanceMarginToMargin, } from '../../lib/chart-utils';
+import { computeHeights, computeHorizontalPadding, computeVerticalPadding, appearanceMarginToMargin, } from '../../lib/chart-utils';
 import { TitleAndDescription } from '../title-and-description';
@@ -47,7 +58,8 @@ import { Legend } from '../legend';
 import { useFilterableDataset } from '../common/use-filterable-dataset';
-import { getBarchartAxis, sanitizeBarchartAppearanceConfig } from './barchart-utils';
+import { buildBarchartScales, getBarchartAxis, sanitizeBarchartAppearanceConfig, } from './barchart-utils';
 import { VerticalZeroAxis } from '../axis/vertical-zero-axis';
 import { defaultFormatter } from '../common/tooltip-utils';
 export function BarchartStackedBase(_a) {
-    var dimensions = _a.dimensions, axesConfig = _a.axesConfig, data = _a.data, moments = _a.moments, structure = _a.structure, _b = _a.fallback, fallback = _b === void 0 ? null : _b, _c = _a.texts, texts = _c === void 0 ? { title: '', description: '' } : _c, categoriesMap = _a.categoriesMap, formatter = _a.formatter, types = _a.types, _d = _a.withLegend, withLegend = _d === void 0 ? false : _d, _e = _a.debug, debug = _e === void 0 ? false : _e, partialAppearanceConfig = _a.appearanceConfig, _f = _a.isInteractive, isInteractive = _f === void 0 ? true : _f, isVertical = _a.isVertical, isPercentage = _a.isPercentage;
+    var _b;
+    var dimensions = _a.dimensions, axesConfig = _a.axesConfig, data = _a.data, moments = _a.moments, structure = _a.structure, _c = _a.fallback, fallback = _c === void 0 ? null : _c, _d = _a.texts, texts = _d === void 0 ? { title: '', description: '' } : _d, categoriesMap = _a.categoriesMap, formatter = _a.formatter, types = _a.types, _e = _a.withLegend, withLegend = _e === void 0 ? false : _e, _f = _a.debug, debug = _f === void 0 ? false : _f, partialAppearanceConfig = _a.appearanceConfig, _g = _a.isInteractive, isInteractive = _g === void 0 ? true : _g, isVertical = _a.isVertical, isPercentage = _a.isPercentage;
     var appearanceConfig = sanitizeBarchartAppearanceConfig(partialAppearanceConfig, isVertical);
@@ -57,4 +69,4 @@ var width = dimensions.width, height = dimensions.height;
     var margin = appearanceMarginToMargin(appearanceConfig.margin);
-    var _g = getAxesNamesAndTypes(structure, types), columnNames = _g.columnNames, columnTypes = _g.columnTypes;
-    var _h = getBarchartAxis(isVertical), distributionAxis = _h.distributionAxis, lengthAxis = _h.lengthAxis;
+    var _h = getAxesNamesAndTypes(structure, types), columnNames = _h.columnNames, columnTypes = _h.columnTypes;
+    var _j = getBarchartAxis(isVertical), distributionAxis = _j.distributionAxis, lengthAxis = _j.lengthAxis;
     var getLengthColumn = function (datum) { return getter(datum, lengthAxis, columnNames); };
@@ -64,3 +76,3 @@ var getDistributionColumn = function (datum) {
     };
-    var _j = __read(useFilterableDataset(data, columnNames.color), 2), filteredData = _j[0], filterData = _j[1];
+    var _k = __read(useFilterableDataset(data, columnNames.color), 2), filteredData = _k[0], filterData = _k[1];
     if (!isStructValid(structure, 'x', 'y', 'color') || !data.length) {
@@ -95,5 +107,5 @@ return (fallback && (React.createElement("div", null,
     });
-    var _k = __read(extent(__spread(values(lengthByDistribution).map(function (d) { return d.lengthSum; }), [
+    var _l = __read(extent(__spread(values(lengthByDistribution).map(function (d) { return d.lengthSum; }), [
         0,
-    ])), 2), minStacked = _k[0], maxStacked = _k[1];
+    ])), 2), minStacked = _l[0], maxStacked = _l[1];
     var lengthDomain = get(axesConfig, lengthAxis + ".scaleDomain.value", [minStacked, maxStacked]);
@@ -112,26 +124,18 @@ var ticks = getXYTicks(isVertical ? scaleBand().domain(distributionCategories) : scaleLinear().domain(lengthDomain), isVertical ? scaleLinear().domain(lengthDomain) : scaleBand().domain(distributionCategories), axesConfig, columnTypes, categoriesMap);
     var titleAndDescriptionHeight = hTitle + hDescription;
-    var chartDimensionWithMargins = {
+    var availableDimensions = {
         width: contentWidth - padding.left,
         height: contentHeight - padding.bottom,
     };
-    var _l = computeChartInnerRanges(chartDimensionWithMargins, appearanceConfig), xRange = _l.xRange, yRange = _l.yRange;
-    var distributionRange = isVertical ? xRange : yRange;
-    var lengthRange = isVertical ? yRange : xRange;
+    var lengthInfo = { domain: lengthDomain };
+    var distributionInfo = {
+        // distributionCategories represents barchart groups
+        groups: distributionCategories,
+        // there are no sub categories, pass 1 fake category
+        categories: [''],
+    };
+    var scales = buildBarchartScales(isVertical, availableDimensions, lengthInfo, distributionInfo, ticks, appearanceConfig);
+    var xScale = scales.xScale, yScale = scales.yScale, 
+    // ignore distributionBarScale, use only distributionGroupScale
+    distributionScale = scales.distributionGroupScale, lengthScale = scales.lengthScale, chartDimensionWithMargins = scales.chartDimensions;
     var barStyle = lineConfigToStyle(appearanceConfig.outline);
-    var distributionSpace = isVertical
-        ? chartDimensionWithMargins.width
-        : chartDimensionWithMargins.height;
-    var barPadding = appearanceConfig.barDimensionStyle.value === 'fixed-width'
-        ? { inner: 0.8, outer: 0.8 } // TODO: BACKWARD COMPATIBILITY: padding should not be fixed to 0.8, but changing this value may affect existing configs in prod
-        : computeBarPadding(distributionSpace, distributionCategories.length, 1, appearanceConfig);
-    var distributionScale = scaleBand()
-        .domain(distributionCategories)
-        .range(distributionRange)
-        .paddingInner(barPadding.inner)
-        .paddingOuter(barPadding.outer);
-    var lengthScale = scaleLinear()
-        .domain(lengthDomain)
-        .range(lengthRange);
-    var xScale = isVertical ? distributionScale : lengthScale;
-    var yScale = isVertical ? lengthScale : distributionScale;
     var scaleColor = scaleOrdinal(appearanceConfig.categoryAreasColors.map(toRgb)).domain(keys(get(moments, [columnNames.color, 'frequencies'], {})));
@@ -180,2 +184,3 @@ var getterColor = function (datum) {
     var findHoveredDatum = buildRectFinder(rectData);
+    var columnNamesWithPercentage = __assign(__assign({}, columnNames), (_b = {}, _b[lengthAxis] = isPercentage ? columnNames[lengthAxis] + " %" : columnNames[lengthAxis], _b));
     return (React.createElement(TooltipContainer, null,
@@ -189,3 +194,3 @@ React.createElement("svg", { width: width, height: height },
                 React.createElement("g", { transform: "translate(" + padding.left + ",0)" },
-                    React.createElement(Axes, { appearanceConfig: appearanceConfig, moments: moments, axesConfig: axesConfig, formatter: formatter, realDimensions: chartDimensionWithMargins, columnNames: columnNames, columnTypes: columnTypes, xScale: xScale, yScale: yScale, margin: margin, data: data, categoriesMap: categoriesMap, ticks: ticks, padding: padding, categoricalGridStyle: appearanceConfig.barchartCategroricalGridPosition.value })),
+                    React.createElement(Axes, { appearanceConfig: appearanceConfig, moments: moments, axesConfig: axesConfig, formatter: formatter, realDimensions: chartDimensionWithMargins, columnNames: columnNamesWithPercentage, columnTypes: columnTypes, xScale: xScale, yScale: yScale, margin: margin, data: data, categoriesMap: categoriesMap, ticks: ticks, padding: padding, categoricalGridStyle: appearanceConfig.barchartCategroricalGridPosition.value, rotateXTicks: availableDimensions.height > chartDimensionWithMargins.height })),
                 React.createElement(Frame, { appearanceConfig: appearanceConfig, axesConfig: axesConfig, dimensions: {
@@ -192,0 +197,0 @@ width: contentWidth,

dist/components/barchart/barchart-utils.d.ts

@@ -0,1 +1,4 @@
+import { ScaleBand, ScaleLinear } from 'd3-scale';
+import { AxisTicks } from '../../lib/formatter-utils';
+import { ChartDimensions } from '../common/common-props';
 import { ChartAppearanceConfig } from '../control-panel/types/chart-config';
@@ -10,1 +13,19 @@ export declare function sanitizeBarchartAppearanceConfig(partialConfig: Partial<ChartAppearanceConfig>, isVertical: boolean): ChartAppearanceConfig;
 export declare function getBarchartAxis(isVertical: boolean): BarchartAxis;
+export interface LengthInfo {
+    domain: [number, number];
+}
+export interface DistributionInfo {
+    groups: string[];
+    categories: string[];
+}
+export declare function buildBarchartScales(isVertical: boolean, availableDimensions: ChartDimensions, lengthInfo: LengthInfo, distributionInfo: DistributionInfo, ticks: AxisTicks, appearanceConfig: ChartAppearanceConfig): {
+    xScale: ScaleLinear<number, number> | ScaleBand<string>;
+    yScale: ScaleLinear<number, number> | ScaleBand<string>;
+    chartDimensions: {
+        width: number;
+        height: number;
+    };
+    lengthScale: ScaleLinear<number, number>;
+    distributionBarScale: ScaleBand<string>;
+    distributionGroupScale: ScaleBand<string>;
+};

dist/components/barchart/barchart-utils.js

@@ -12,2 +12,4 @@ var __assign = (this && this.__assign) || function () {
 };
+import { scaleBand, scaleLinear } from 'd3-scale';
+import { computeBarPadding, computeChartInnerRangeX, computeChartInnerRangeY, computeXTicksHeight, } from '../../lib/chart-utils';
 import { sanitizeAppearanceConfig } from '../../lib/utils';
@@ -26,2 +28,39 @@ export function sanitizeBarchartAppearanceConfig(partialConfig, isVertical) {
 }
+function buildLengthScale(lengthInfo, range) {
+    var lengthScale = scaleLinear()
+        .domain(lengthInfo.domain)
+        .range(range);
+    return { lengthScale: lengthScale };
+}
+function buildDistributionScales(distribution, range, appearanceConfig) {
+    var barPadding = computeBarPadding(range, distribution.groups.length, distribution.categories.length, appearanceConfig);
+    var distributionGroupScale = scaleBand()
+        .domain(distribution.groups)
+        .range(range)
+        .paddingInner(barPadding.inner)
+        .paddingOuter(barPadding.outer);
+    var distributionBarScale = scaleBand()
+        .domain(distribution.categories)
+        .range([0, distributionGroupScale.bandwidth()]);
+    return { distributionBarScale: distributionBarScale, distributionGroupScale: distributionGroupScale };
+}
+export function buildBarchartScales(isVertical, availableDimensions, lengthInfo, distributionInfo, ticks, appearanceConfig) {
+    var xRange = computeChartInnerRangeX(availableDimensions.width, appearanceConfig);
+    var partialScalesX = isVertical
+        ? buildDistributionScales(distributionInfo, xRange, appearanceConfig)
+        : buildLengthScale(lengthInfo, xRange);
+    var xScale = isVertical ? partialScalesX.distributionGroupScale : partialScalesX.lengthScale;
+    var hXTicks = computeXTicksHeight(ticks.xTicks.map(function (t) { return xScale(t); }), ticks.xTicksFormatted, appearanceConfig);
+    var chartDimensions = {
+        width: availableDimensions.width,
+        height: availableDimensions.height - hXTicks,
+    };
+    var yRange = computeChartInnerRangeY(chartDimensions.height, appearanceConfig);
+    var partialScalesY = isVertical
+        ? buildLengthScale(lengthInfo, yRange)
+        : buildDistributionScales(distributionInfo, yRange, appearanceConfig);
+    var yScale = isVertical ? partialScalesY.lengthScale : partialScalesY.distributionGroupScale;
+    var scales = __assign(__assign({}, partialScalesX), partialScalesY);
+    return __assign(__assign({}, scales), { xScale: xScale, yScale: yScale, chartDimensions: chartDimensions });
+}
 //# sourceMappingURL=barchart-utils.js.map

dist/components/common/tooltip-utils.d.ts

@@ -6,4 +6,4 @@ /// <reference types="react" />
 };
-export declare const defaultFormatter: <Key extends "symbol" | "x" | "y" | "color" | "radius" | "label" | "arc" | "size" | "category">(datum: {
+export declare const defaultFormatter: <Key extends "symbol" | "x" | "y" | "color" | "radius" | "size" | "label" | "arc" | "category">(datum: {
     [x: string]: import("data-juggler/build/main/types/types").ContinuousDatum | import("data-juggler/build/main/types/types").CategoricalDatum | import("data-juggler/build/main/types/types").DatetimeDatum;
 }, columnKey: Key, columnNames: ColumnNames, columnTypes: ColumnTypes) => string;

dist/components/control-panel/factory.js

@@ -35,3 +35,3 @@ var __assign = (this && this.__assign) || function () {
 import { t } from './types/factory-types';
-import { isInterpolation, isRGBA, isRGBATuple, isLineStyle, isSlider, isSelect, isFontStyle, isMargin, isFontSize, isRGBAObject, isFile, isFontFaces, isFontFace, isSymbols, } from './types/detect-config';
+import { isInterpolation, isRGBA, isRGBATuple, isLineStyle, isSlider, isSelect, isFontStyle, isMargin, isFontSize, isRGBAObject, isFile, isFontFaces, isFontFace, isSymbols, isTicksRotation, } from './types/detect-config';
 /**
@@ -105,2 +105,5 @@ * Takes a config object and returns a data structure
         }
+        else if (isTicksRotation(value)) {
+            return [{ type: t.group, path: _p, title: title }, controlPanelFactory(value, _p)];
+        }
         else if (value === null) {
@@ -107,0 +110,0 @@ return [];

dist/components/control-panel/types/chart-config.d.ts

@@ -74,2 +74,8 @@ import { genDefaultSlider } from './default-config';
 export declare type Interpolations = typeof interpolations[number];
+export declare const axesTicksRotationStrategy: ["dynamic", "always"];
+export declare type AxesTicksRotationStrategy = typeof axesTicksRotationStrategy[number];
+export declare type AxesTicksRotation = {
+    angle: DefaultSlider;
+    strategy: DefaultSelect<AxesTicksRotationStrategy>;
+};
 export declare type ChartAppearanceConfig = {
@@ -82,2 +88,3 @@ margin: Margin;
     axesTicksFontStyle: FontStyleConfig & TextAlignmentConfig;
+    axesTicksRotation: AxesTicksRotation;
     legendFontStyle: FontStyleConfig;
@@ -117,2 +124,3 @@ legendPosition: DefaultSelect<string>;
     outline: LineStyleConfig;
+    pieOuterLineStyle: LineStyleConfig;
     presetColors: Array<RGBA>;
@@ -119,0 +127,0 @@ continuousColorDivergent?: {

dist/components/control-panel/types/chart-config.js

@@ -10,2 +10,3 @@ import { strTuple } from '../../../lib/type-utils';
 export var interpolations = ['linear', 'stepped', 'curved'];
+export var axesTicksRotationStrategy = strTuple('dynamic', 'always');
 //# sourceMappingURL=chart-config.js.map

dist/components/control-panel/types/default-config.js

@@ -32,3 +32,3 @@ var __assign = (this && this.__assign) || function () {
 };
-import { interpolations, textAlignmentOptionsX, textAlignmentOptionsY, barDimensionOptions, categoricalGridOptions, ticksVisibilityOptions, legendPositionOptions, barchartHorizontalInvertAxisOptions as barchartHorizontalInvertAxesStylesOptions, } from './chart-config';
+import { interpolations, textAlignmentOptionsX, textAlignmentOptionsY, barDimensionOptions, categoricalGridOptions, ticksVisibilityOptions, legendPositionOptions, barchartHorizontalInvertAxisOptions as barchartHorizontalInvertAxesStylesOptions, axesTicksRotationStrategy, } from './chart-config';
 import { theNextBigThing } from '../../../lib/number-utils';
@@ -142,2 +142,6 @@ import { akkuratFont } from '../utils/fonts';
     },
+    axesTicksRotation: {
+        angle: { value: -45, min: -90, max: 90 },
+        strategy: genDefaultSelect('dynamic', axesTicksRotationStrategy),
+    },
     legendFontStyle: {
@@ -184,2 +188,3 @@ color: { r: 0, g: 0, b: 0, a: 1 },
     },
+    pieOuterLineStyle: __assign(__assign({}, defaultLine), { strokeWidth: __assign(__assign({}, defaultLine.strokeWidth), { value: 0 }) }),
     presetColors: [],
@@ -186,0 +191,0 @@ continuousColorDivergent: {

dist/components/control-panel/types/detect-config.d.ts

@@ -1,2 +0,2 @@
-import { LineStyleConfig, FontStyleConfig, RGBA, Interpolations, DefaultSlider, DefaultSelect, FontSize, FileFormat, FontFace } from './chart-config';
+import { LineStyleConfig, FontStyleConfig, RGBA, Interpolations, DefaultSlider, DefaultSelect, FontSize, FileFormat, FontFace, AxesTicksRotation } from './chart-config';
 import { SymbolId } from '../../common/common-props';
@@ -17,1 +17,2 @@ export declare function isRGBA(obj: unknown): obj is RGBA;
 export declare function isSymbols(symbols: unknown): symbols is Array<DefaultSelect<SymbolId>>;
+export declare function isTicksRotation(rotation: unknown): rotation is AxesTicksRotation;

dist/components/control-panel/types/detect-config.js

@@ -70,2 +70,7 @@ import { has, keys, isArray, isString, isObject } from 'lodash';
 }
+export function isTicksRotation(rotation) {
+    if (!isObject(rotation))
+        return false;
+    return hasMultiple(rotation, ['angle', 'strategy']);
+}
 //# sourceMappingURL=detect-config.js.map

dist/components/heatmap/heatmap.js

@@ -31,3 +31,3 @@ var __read = (this && this.__read) || function (o, n) {
 import { getAxesNamesAndTypes } from '../../lib/axes-utils';
-import { appearanceMarginToMargin, computeHeights, computeHorizontalPadding, computeVerticalPadding, } from '../../lib/chart-utils';
+import { appearanceMarginToMargin, computeHeights, computeHorizontalPadding, computeVerticalPadding, computeXTicksHeight, } from '../../lib/chart-utils';
 import { TitleAndDescription } from '../title-and-description';
@@ -84,6 +84,2 @@ import { computeLegendStructure } from '../legend/utils';
     var titleAndDescriptionHeight = hTitle + hDescription;
-    var chartDimensionWithMargins = {
-        width: contentWidth - padding.left,
-        height: contentHeight - padding.bottom,
-    };
     // check on data: number of rects (uniq xValues * uniq yValues) < data.length otherwise there are overplapping rects
@@ -105,4 +101,11 @@ var xValues = uniq(data.map(function (d) { return d[columnNames.x].raw; }));
     var isCategoricalY = types[columnNames.y] === 'categorical';
-    var _f = getScale([0, chartDimensionWithMargins.width], data, columnNames.x), scaleX = _f.scale, bandwidthX = _f.bandwidth;
-    var _g = getScale([chartDimensionWithMargins.height, 0], data, columnNames.y), scaleY = _g.scale, bandwidthY = _g.bandwidth;
+    var chartWidth = contentWidth - padding.left;
+    var _f = getScale([0, chartWidth], data, columnNames.x), scaleX = _f.scale, bandwidthX = _f.bandwidth;
+    var hXTicks = computeXTicksHeight(ticks.xTicks.map(function (t) { return scaleX(t); }), ticks.xTicksFormatted, appearanceConfig);
+    var chartHeight = contentHeight - padding.bottom - hXTicks;
+    var _g = getScale([chartHeight, 0], data, columnNames.y), scaleY = _g.scale, bandwidthY = _g.bandwidth;
+    var chartDimensionWithMargins = {
+        width: chartWidth,
+        height: chartHeight,
+    };
     var scaleSize = scaleSqrt()
@@ -151,3 +154,3 @@ .domain(domainSize)
                 React.createElement("g", { transform: "translate(" + padding.left + ",0)" },
-                    React.createElement(Axes, { appearanceConfig: appearanceConfig, moments: moments, axesConfig: axesConfig, formatter: formatter, realDimensions: chartDimensionWithMargins, columnNames: columnNames, columnTypes: columnTypesCategorical, xScale: scaleX, yScale: scaleY, margin: margin, data: data, showGrid: false, showAxes: false, categoriesMap: categoriesMap, padding: padding, ticks: ticks })),
+                    React.createElement(Axes, { appearanceConfig: appearanceConfig, moments: moments, axesConfig: axesConfig, formatter: formatter, realDimensions: chartDimensionWithMargins, columnNames: columnNames, columnTypes: columnTypesCategorical, xScale: scaleX, yScale: scaleY, margin: margin, data: data, showGrid: false, showAxes: false, categoriesMap: categoriesMap, padding: padding, ticks: ticks, rotateXTicks: hXTicks > 0 })),
                 React.createElement(Frame, { appearanceConfig: appearanceConfig, axesConfig: axesConfig, dimensions: {
@@ -154,0 +157,0 @@ width: contentWidth,

dist/components/interactivity-layer/interactivity-layer.js

@@ -60,3 +60,4 @@ var __assign = (this && this.__assign) || function () {
         var el = ref.current;
-        if (!el)
+        var container = tooltipContainerRef.current;
+        if (!el || !container)
             return function () { };
@@ -69,4 +70,4 @@ if (pointedDatum === null || hover || !gesture.touch)
         };
-        window.addEventListener('click', handleClickOutside);
-        return function () { return window.removeEventListener('click', handleClickOutside); };
+        container.addEventListener('click', handleClickOutside);
+        return function () { return container.removeEventListener('click', handleClickOutside); };
     }, [pointedDatum, hover]);
@@ -73,0 +74,0 @@ useGesture(ref, function (mouse) {

dist/components/legend/utils.d.ts

@@ -11,4 +11,4 @@ import { GenericDatum, CategoryFrequencyAssociation, LegendStructure, LegendAssociation, ColumnTypes, CategoriesMap } from '../common/common-props';
 export declare function computeLegendStructure(moments: MomentsObject<GenericDatum>, structure: StructureConfig, appearanceConfig: ChartAppearanceConfig, contentWidth: number, columnTypes: ColumnTypes, categoriesMap: CategoriesMap, options?: Options): LegendStructure;
-export declare function measure(text: string, legendStyle: FontStyle): any;
+export declare function measure(text: string, legendStyle: FontStyle): number;
 export declare function getLegendAssociationsByAxis(moments: MomentsObject<GenericDatum>, structure: StructureConfig, legendItems: CategoryFrequencyAssociation[] | undefined, categoriesMap: CategoriesMap, axisName: string): LegendAssociation[];
 export {};

dist/components/linechart/linechart.js

@@ -36,3 +36,3 @@ var __read = (this && this.__read) || function (o, n) {
 import { Axes } from '../axis/axes';
-import { appearanceMarginToMargin, computeHeights, computeHorizontalPadding, computeVerticalPadding, } from '../../lib/chart-utils';
+import { appearanceMarginToMargin, computeHeights, computeHorizontalPadding, computeVerticalPadding, computeXTicksHeight, } from '../../lib/chart-utils';
 import { TitleAndDescription } from '../title-and-description';
@@ -94,6 +94,2 @@ import { FeedbackError } from '../feedback-error';
     var titleAndDescriptionHeight = hTitle + hDescription;
-    var chartDimensionWithMargins = {
-        width: contentWidth - padding.left,
-        height: contentHeight - padding.bottom,
-    };
     if (!columnNames.color) {
@@ -112,8 +108,15 @@ if (yUniqValues.length > xUniqValues.length) {
     }
+    var chartWidth = contentWidth - padding.left;
     var scaleX = scaleLinear()
         .domain(nicestDomainX)
-        .range([0, chartDimensionWithMargins.width]);
+        .range([0, chartWidth]);
+    var hXTicks = computeXTicksHeight(ticks.xTicks.map(function (t) { return scaleX(t); }), ticks.xTicksFormatted, appearanceConfig);
+    var chartHeight = contentHeight - padding.bottom - hXTicks;
     var scaleY = scaleLinear()
         .domain(nicestDomainY)
-        .range([chartDimensionWithMargins.height, 0]);
+        .range([chartHeight, 0]);
+    var chartDimensionWithMargins = {
+        width: chartWidth,
+        height: chartHeight,
+    };
     var isPointVisible = function (p) { return between(p.x, scaleX.range()) && between(p.y, scaleY.range()); };
@@ -151,3 +154,3 @@ var scaleColor = buildScaleColor(appearanceConfig, columnNames, axesConfig, moments);
                 React.createElement("g", { transform: "translate(" + padding.left + ",0)" },
-                    React.createElement(Axes, { appearanceConfig: appearanceConfig, moments: moments, axesConfig: axesConfig, formatter: formatter, realDimensions: chartDimensionWithMargins, columnNames: columnNames, columnTypes: columnTypes, xScale: scaleX, yScale: scaleY, margin: margin, data: filteredData, categoriesMap: categoriesMap, ticks: ticks, padding: padding })),
+                    React.createElement(Axes, { appearanceConfig: appearanceConfig, moments: moments, axesConfig: axesConfig, formatter: formatter, realDimensions: chartDimensionWithMargins, columnNames: columnNames, columnTypes: columnTypes, xScale: scaleX, yScale: scaleY, margin: margin, data: filteredData, categoriesMap: categoriesMap, ticks: ticks, padding: padding, rotateXTicks: hXTicks > 0 })),
                 React.createElement(Frame, { appearanceConfig: appearanceConfig, axesConfig: axesConfig, dimensions: {
@@ -154,0 +157,0 @@ width: contentWidth,

dist/components/piechart/piechart-base.js

@@ -29,2 +29,3 @@ var __assign = (this && this.__assign) || function () {
 import React from 'react';
+import { Text } from '@vx/text';
 import { sum, round, get, sortBy, uniq } from 'lodash';
@@ -90,7 +91,18 @@ import { isStructValid } from '../../lib/type-utils';
     };
+    var totalTitleFont = fontConfigToStyle(appearanceConfig.axesLabelsFontStyle);
+    var totalValueFont = fontConfigToStyle(appearanceConfig.axesTicksFontStyle);
+    var totalLinesSpace = 7;
+    var totalMarginTop = 35;
+    var totalHeightWithMargin = !donut
+        ? totalTitleFont.fontSize * totalTitleFont.lineHeight +
+            totalValueFont.fontSize * totalValueFont.lineHeight +
+            totalLinesSpace +
+            totalMarginTop
+        : 0;
     var outerRadius = Math.min(chartDimensionWithMargins.width, chartDimensionWithMargins.height) / 2 -
-        2 * TICK_LENGTH;
+        (donut ? 2 * TICK_LENGTH : 0) -
+        totalHeightWithMargin / 2;
     var innerRadius = outerRadius - SECTION_WIDTH;
     var centerX = chartDimensionWithMargins.width / 2 + margin.left;
-    var centerY = yChart + chartDimensionWithMargins.height / 2;
+    var centerY = yChart + chartDimensionWithMargins.height / 2 - totalHeightWithMargin / 2;
     var radiustStartTick = outerRadius + 2;
@@ -154,7 +166,23 @@ var radiustEndTick = radiustStartTick + TICK_LENGTH;
                                             : '#fff' }) }, isPercentage ? percentageValue : arc.value))));
-                    }))),
+                    }),
+                    React.createElement("g", { className: "-pie-outline" },
+                        React.createElement("circle", { fill: "none", r: outerRadius, stroke: toRgb(appearanceConfig.pieOuterLineStyle.color), strokeDasharray: appearanceConfig.pieOuterLineStyle.dashArray, strokeWidth: appearanceConfig.pieOuterLineStyle.strokeWidth.value })))),
+            totalHeightWithMargin && (React.createElement("g", { className: "-total", transform: "translate(" + centerX + " " + (centerY + outerRadius + totalMarginTop) + ")" },
+                debug && (React.createElement("rect", { x: -100 / 2, width: 100, y: 0, height: totalHeightWithMargin - totalMarginTop, stroke: "green", fill: "none" })),
+                React.createElement(Text, { textAnchor: "middle", dominantBaseline: "hanging", style: totalTitleFont }, "Totale"),
+                React.createElement(Text, { textAnchor: "middle", dominantBaseline: "hanging", y: totalValueFont.lineHeight * totalValueFont.fontSize + totalLinesSpace, style: totalValueFont }, sumYValue))),
             withLegend && (React.createElement(Legend, { moments: moments, margin: margin, height: hLegend, structure: structure, appearanceConfig: appearanceConfig, 
                 // legendItems={legendItems}
                 colorScale: colorScale, columnTypes: columnTypes, debug: debug, legendStructure: legendStructure, y: yLegend, handleClick: filterData, filteredData: filteredData })),
-            isInteractive && (React.createElement(InteractivityLayer, { findHoveredDatum: findHoveredDatum, x: interactivityLayerTranslate.x, y: interactivityLayerTranslate.y, dimension: chartDimensionWithMargins, getterColor: getterColor, columnNames: columnNames, columnTypes: columnTypes, appearanceConfig: appearanceConfig }, function (_a) {
+            isInteractive && (React.createElement(InteractivityLayer, { findHoveredDatum: findHoveredDatum, x: interactivityLayerTranslate.x, y: interactivityLayerTranslate.y, dimension: chartDimensionWithMargins, getterColor: getterColor, columnNames: columnNames, columnTypes: columnTypes, appearanceConfig: appearanceConfig, tooltipValuesComponents: {
+                    arc: function (datum) {
+                        var absoluteValue = getter(datum, 'arc', columnNames);
+                        var percValue = (absoluteValue / sumYValue) * 100;
+                        return (React.createElement("div", null,
+                            React.createElement("div", { style: { fontWeight: 'bold', marginBottom: '0.25rem' } },
+                                round(percValue, 2),
+                                "%"),
+                            React.createElement("div", { style: { fontWeight: 'normal' } }, absoluteValue)));
+                    },
+                } }, function (_a) {
                 var path = _a.path;
@@ -161,0 +189,0 @@ return (React.createElement("g", { transform: "translate(\n                    " + interactivityLayerCenter.x + ", \n                    " + interactivityLayerCenter.y + ")" },

dist/components/scatterplot/scatterplot.js

@@ -32,3 +32,3 @@ var __read = (this && this.__read) || function (o, n) {
 import { getAxesNamesAndTypes } from '../../lib/axes-utils';
-import { appearanceMarginToMargin, computeHeights, computeHorizontalPadding, computeVerticalPadding, } from '../../lib/chart-utils';
+import { appearanceMarginToMargin, computeHeights, computeHorizontalPadding, computeVerticalPadding, computeXTicksHeight, } from '../../lib/chart-utils';
 import { TitleAndDescription } from '../title-and-description';
@@ -95,8 +95,8 @@ import { Legend } from '../legend';
     var titleAndDescriptionHeight = hTitle + hDescription;
-    var chartDimensionWithMargins = {
-        width: contentWidth - padding.left,
-        height: contentHeight - padding.bottom,
-    };
-    var scaleX = getScale(isCategoricalX, Object.keys(moments[columnNames.x].frequencies), nicestDomainX, [0, chartDimensionWithMargins.width]);
-    var scaleY = getScale(isCategoricalY, Object.keys(moments[columnNames.y].frequencies), nicestDomainY, [chartDimensionWithMargins.height, 0]);
+    var chartWidth = contentWidth - padding.left;
+    var scaleX = getScale(isCategoricalX, Object.keys(moments[columnNames.x].frequencies), nicestDomainX, [0, chartWidth]);
+    var hXTicks = computeXTicksHeight(ticks.xTicks.map(function (t) { return scaleX(t); }), ticks.xTicksFormatted, appearanceConfig);
+    var chartHeight = contentHeight - padding.bottom - hXTicks;
+    var scaleY = getScale(isCategoricalY, Object.keys(moments[columnNames.y].frequencies), nicestDomainY, [chartHeight, 0]);
+    var chartDimensionWithMargins = { width: chartWidth, height: chartHeight };
     var scaleRadius = scaleSqrt()
@@ -151,3 +151,3 @@ .domain(domainR)
                 React.createElement("g", { transform: "translate(" + padding.left + ",0)" },
-                    React.createElement(Axes, { appearanceConfig: appearanceConfig, moments: moments, axesConfig: axesConfig, formatter: formatter, realDimensions: chartDimensionWithMargins, columnNames: columnNames, columnTypes: columnTypes, xScale: scaleX, yScale: scaleY, margin: margin, data: filteredData, categoriesMap: categoriesMap, ticks: ticks, padding: padding })),
+                    React.createElement(Axes, { appearanceConfig: appearanceConfig, moments: moments, axesConfig: axesConfig, formatter: formatter, realDimensions: chartDimensionWithMargins, columnNames: columnNames, columnTypes: columnTypes, xScale: scaleX, yScale: scaleY, margin: margin, data: filteredData, categoriesMap: categoriesMap, ticks: ticks, rotateXTicks: hXTicks > 0, padding: padding })),
                 React.createElement(Frame, { appearanceConfig: appearanceConfig, axesConfig: axesConfig, dimensions: {
@@ -154,0 +154,0 @@ width: contentWidth,

dist/components/stacked-area/stacked-area.js

@@ -27,3 +27,3 @@ var __read = (this && this.__read) || function (o, n) {
 import { getAxesNamesAndTypes } from '../../lib/axes-utils';
-import { appearanceMarginToMargin, computeDataColumn, computeHeights, computeHorizontalPadding, computeVerticalPadding, } from '../../lib/chart-utils';
+import { appearanceMarginToMargin, computeDataColumn, computeHeights, computeHorizontalPadding, computeVerticalPadding, computeXTicksHeight, } from '../../lib/chart-utils';
 import { TitleAndDescription } from '../title-and-description';
@@ -83,12 +83,15 @@ import { Axes } from '../axis/axes';
     var titleAndDescriptionHeight = hTitle + hDescription;
-    var chartDimensionWithMargins = {
-        width: contentWidth - padding.left,
-        height: contentHeight - padding.bottom,
-    };
+    var chartWidth = contentWidth - padding.left;
     var scaleX = scaleLinear()
         .domain(nicestDomainX)
-        .range([0, chartDimensionWithMargins.width]);
+        .range([0, chartWidth]);
+    var hXTicks = computeXTicksHeight(ticks.xTicks.map(function (t) { return scaleX(t); }), ticks.xTicksFormatted, appearanceConfig);
+    var chartHeight = contentHeight - padding.bottom - hXTicks;
     var scaleY = scaleLinear()
         .domain(nicestDomainYAxesConfig)
-        .range([chartDimensionWithMargins.height, 0]);
+        .range([chartHeight, 0]);
+    var chartDimensionWithMargins = {
+        width: chartWidth,
+        height: chartHeight,
+    };
     var colors = appearanceConfig.categoryAreasColors;
@@ -146,3 +149,3 @@ var colorScale = scaleOrdinal()
                     React.createElement("g", { "data-test": "grid" },
-                        React.createElement(Axes, { appearanceConfig: appearanceConfig, moments: moments, axesConfig: axesConfig, formatter: formatter, realDimensions: chartDimensionWithMargins, columnNames: columnNames, columnTypes: columnTypes, xScale: scaleX, yScale: scaleY, margin: margin, data: filteredData, ticks: ticks, padding: padding }))),
+                        React.createElement(Axes, { appearanceConfig: appearanceConfig, moments: moments, axesConfig: axesConfig, formatter: formatter, realDimensions: chartDimensionWithMargins, columnNames: columnNames, columnTypes: columnTypes, xScale: scaleX, yScale: scaleY, margin: margin, data: filteredData, ticks: ticks, padding: padding, rotateXTicks: hXTicks > 0 }))),
                 React.createElement(Frame, { appearanceConfig: appearanceConfig, axesConfig: axesConfig, dimensions: {
@@ -149,0 +152,0 @@ width: contentWidth,

dist/components/streamgraph/streamgraph.js

@@ -9,3 +9,3 @@ import React from 'react';
 import { Axes } from '../axis/axes';
-import { appearanceMarginToMargin, computeDataColumn, computeHeights, computeVerticalPadding, } from '../../lib/chart-utils';
+import { appearanceMarginToMargin, computeDataColumn, computeHeights, computeVerticalPadding, computeXTicksHeight, } from '../../lib/chart-utils';
 import { TitleAndDescription } from '../title-and-description';
@@ -49,6 +49,2 @@ import { makeMinMaxFromDomain } from '../../lib/number-utils';
     var contentHeight = hChart - margin.top - margin.bottom;
-    var chartDimensionWithMargins = {
-        width: contentWidth,
-        height: contentHeight - padding.bottom,
-    };
     var existYNegativeValue = moments[columnNames.y].min < 0;
@@ -89,12 +85,18 @@ if (existYNegativeValue) {
     }
+    var ticks = getXYTicks(scaleLinear().domain(nicestDomainX), scaleLinear().domain(nicestDomainYAxesConfig), axesConfig, columnTypes, categoriesMap);
     var xScale = scaleLinear()
         .domain(nicestDomainX)
-        .range([0, chartDimensionWithMargins.width]);
+        .range([0, contentWidth]);
+    var hXTicks = computeXTicksHeight(ticks.xTicks.map(function (t) { return xScale(t); }), ticks.xTicksFormatted, appearanceConfig);
+    var chartHeight = contentHeight - padding.bottom - hXTicks;
     var yScale = scaleLinear()
         .domain(nicestDomainYAxesConfig)
-        .range([chartDimensionWithMargins.height, 0]);
+        .range([chartHeight, 0]);
     var colorScale = scaleOrdinal()
         .domain(categories)
         .range(colors);
-    var ticks = getXYTicks(xScale, yScale, axesConfig, columnTypes, categoriesMap);
+    var chartDimensionWithMargins = {
+        width: contentWidth,
+        height: chartHeight,
+    };
     return (React.createElement("div", null,
@@ -109,3 +111,3 @@ React.createElement("svg", { width: width, height: height },
                     React.createElement("g", { "data-test": "grid" },
-                        React.createElement(Axes, { appearanceConfig: appearanceConfig, moments: moments, axesConfig: axesConfig, formatter: formatter, realDimensions: chartDimensionWithMargins, columnNames: columnNames, columnTypes: columnTypes, xScale: xScale, yScale: yScale, visibleXAxis: false, visibleYAxisAndLabels: false, margin: margin, data: data, ticks: ticks, padding: padding })),
+                        React.createElement(Axes, { appearanceConfig: appearanceConfig, moments: moments, axesConfig: axesConfig, formatter: formatter, realDimensions: chartDimensionWithMargins, columnNames: columnNames, columnTypes: columnTypes, xScale: xScale, yScale: yScale, visibleXAxis: false, visibleYAxisAndLabels: false, margin: margin, data: data, ticks: ticks, padding: padding, rotateXTicks: hXTicks > 0 })),
                     React.createElement("g", { "data-test": "areas-lines", transform: "translate(" + padding.left + ",0)" },
@@ -112,0 +114,0 @@ React.createElement(ClippingRectGroup, { prefix: "streamgraph", x: 0, y: 0, width: chartDimensionWithMargins.width, height: chartDimensionWithMargins.height }, stacks.map(function (series, i) {

dist/lib/chart-utils.d.ts

 import { ChartHeights, Texts, CategoriesMap, ChartDimensions } from '../components/common/common-props';
 import { ChartAppearanceConfig, FontStyleConfig } from '../components/control-panel/types/chart-config';
+export declare function computeXTicksHeight(xTicksPos: number[], xTicksFormatted: string[], appearanceConfig: ChartAppearanceConfig): number;
 export declare function computeHeights(idealLegendHeight: number, dimensions: ChartDimensions, texts: Texts, appearanceConfig: ChartAppearanceConfig): ChartHeights;
-/**
- * Calculates the actual x and y ranges, removing the dimension of axes
- * based on their styles.
- */
-export declare function computeChartInnerRanges(chartDimension: ChartDimensions, appearanceConfig: ChartAppearanceConfig): {
-    xRange: [number, number];
-    yRange: [number, number];
-};
+export declare function computeChartInnerRangeX(width: number, appearanceConfig: ChartAppearanceConfig): [number, number];
+export declare function computeChartInnerRangeY(height: number, appearanceConfig: ChartAppearanceConfig): [number, number];
 export declare function computeDataColumn(dataGroupedByX: any, columnNames: {
@@ -32,3 +27,3 @@ x: string;
 }): number;
-export declare function computeBarPadding(chartWidth: number, groupsAmount: number, barsPerGroup: number, appearanceConfig: ChartAppearanceConfig): {
+export declare function computeBarPadding(range: [number, number], groupsAmount: number, barsPerGroup: number, appearanceConfig: ChartAppearanceConfig): {
     inner: number;
@@ -35,0 +30,0 @@ outer: number;

dist/lib/chart-utils.js

@@ -1,4 +0,52 @@
-import { values, toNumber, isNil, get, max, min } from 'lodash';
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spread = (this && this.__spread) || function () {
+    for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
+    return ar;
+};
+import { values, toNumber, isNil, get, max, min, zipWith } from 'lodash';
 import { fontConfigToStyle } from './style-utils';
 import { tuple } from './type-utils';
+import { measure } from '../components/legend/utils';
+import { distance } from './math-utils';
+import { pairs } from 'd3-array';
+export function computeXTicksHeight(xTicksPos, xTicksFormatted, appearanceConfig) {
+    if (xTicksFormatted.length === 0)
+        return 0;
+    var MIN_FREE_SPACE = 20;
+    var shouldAlwaysRotate = appearanceConfig.axesTicksRotation.strategy.value === 'always';
+    var angle = appearanceConfig.axesTicksRotation.angle.value;
+    var fontStyle = fontConfigToStyle(appearanceConfig.axesTicksFontStyle);
+    var ticksWidths = xTicksFormatted.map(function (tick) { return measure(tick, fontStyle); });
+    var maxTickWidth = max(ticksWidths);
+    if (shouldAlwaysRotate)
+        return rotatedTickHeight(angle, maxTickWidth);
+    var ticksAvailableSpaces = pairs(xTicksPos, function (left, right) { return right - left; });
+    var ticksOccupiedSpaces = pairs(ticksWidths, function (left, right) { return left / 2 + right / 2; });
+    var ticksFreeSpaces = zipWith(ticksOccupiedSpaces, ticksAvailableSpaces, function (occupiedSpace, availableSpace) { return availableSpace - occupiedSpace; });
+    var isThereAnOverlappingPair = ticksFreeSpaces.some(function (freeSpace) { return freeSpace < MIN_FREE_SPACE; });
+    if (isThereAnOverlappingPair) {
+        return rotatedTickHeight(angle, maxTickWidth);
+    }
+    else {
+        return 0;
+    }
+}
+function rotatedTickHeight(angle, tickWidth) {
+    return Math.abs(Math.sin((angle / 180) * Math.PI)) * tickWidth;
+}
 export function computeHeights(idealLegendHeight, dimensions, texts, appearanceConfig) {
@@ -64,13 +112,9 @@ var height = dimensions.height;
 }
-/**
- * Calculates the actual x and y ranges, removing the dimension of axes
- * based on their styles.
- */
-export function computeChartInnerRanges(chartDimension, appearanceConfig) {
+export function computeChartInnerRangeX(width, appearanceConfig) {
     var xAxisWidth = Math.max(appearanceConfig.axisVertLineStyle.strokeWidth.value, appearanceConfig.axesFrameLineStyle.strokeWidth.value);
+    return tuple(xAxisWidth / 2, width - xAxisWidth / 2);
+}
+export function computeChartInnerRangeY(height, appearanceConfig) {
     var yAxisWidth = Math.max(appearanceConfig.axisHorizLineStyle.strokeWidth.value, appearanceConfig.axesFrameLineStyle.strokeWidth.value);
-    return {
-        xRange: tuple(xAxisWidth / 2, chartDimension.width - xAxisWidth / 2),
-        yRange: tuple(chartDimension.height - yAxisWidth / 2, yAxisWidth / 2),
-    };
+    return tuple(height - yAxisWidth / 2, yAxisWidth / 2);
 }
@@ -161,3 +205,4 @@ // From:
 }
-export function computeBarPadding(chartWidth, groupsAmount, barsPerGroup, appearanceConfig) {
+export function computeBarPadding(range, groupsAmount, barsPerGroup, appearanceConfig) {
+    var chartWidth = distance.apply(void 0, __spread(range));
     var style = appearanceConfig.barDimensionStyle.value;
@@ -164,0 +209,0 @@ var width = appearanceConfig.barWidth.value;

dist/lib/formatter-utils.d.ts

@@ -11,10 +11,11 @@ import { ContinuousDatum } from 'data-juggler/build/main/types/types';
 export declare function formatTicks(columnType: ColumnType, ticks: Tick[]): string[];
+export interface AxisTicks {
+    xTicks: number[];
+    xTicksFormatted: string[];
+    yTicks: number[];
+    yTicksFormatted: string[];
+}
 export declare function getXYTicks(xScale: any, yScale: any, axesConfig: ChartAxesConfig, axisType: {
     [k in 'x' | 'y']: ColumnType;
-}, categoriesMap: CategoriesMap): {
-    xTicks: number[];
-    xTicksFormatted: any[];
-    yTicks: number[];
-    yTicksFormatted: any[];
-};
+}, categoriesMap: CategoriesMap): AxisTicks;
 export {};

package.json

 {
   "name": "@accurat/chart-library",
-  "version": "0.8.0-beta.13",
+  "version": "0.8.0-beta.14",
   "license": "MIT",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

3037617

increased by0.88%

Lines of code

28466

increased by0.58%

No dependency changes