@milaboratories/miplots4 1.0.176 → 1.0.178

package/dist/bubble/ChartRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChartRenderer.js","sources":["../../src/bubble/ChartRenderer.tsx"],"sourcesContent":["import type { ScaleLinear, ScalePower } from 'd3-scale';\nimport { scaleLinear, scaleOrdinal, scaleSqrt } from 'd3-scale';\nimport type { ReactElement } from 'react';\nimport type { Root } from 'react-dom/client';\nimport { createRoot } from 'react-dom/client';\nimport { Error } from '../common/Error';\nimport type { LegendData, LegendItem } from '../common/types';\nimport { DataFrameProvider } from '../common/useDataFrame';\nimport { DEFAULT_HEIGHT, DEFAULT_WIDTH, MAX_LEGEND_GRADIENT_HEIGHT, MIN_LEGEND_GRADIENT_HEIGHT, TITLE_LINE_HEIGHT, TITLE_MARGIN } from '../constants';\nimport type { DataFrame } from '../DataFrame';\nimport type { ColumnName, DataValue } from '../types';\nimport { arrangeLegendParts } from '../utils/arrangeLegendParts';\nimport { getSizeLegendItem } from '../utils/getSizeLegendItem';\nimport { getChartEdgeSides } from '../utils/getChartEdgeSides';\nimport { getContinuousLegendTicks } from '../utils/getContinuousLegendTicks';\nimport { TextMeasurer } from '../utils/TextMeasurer/TextMeasurer';\nimport type { BubbleSettingsImpl } from './BubbleSettingsImpl';\nimport { ChartsGroup } from './components/ChartsGroup';\nimport type {\n    CaptionsSizes,\n    ChartDimensionsData, ChartScales, ChartSizes,\n    LabelAngles,\n    Margins\n} from './components/types';\nimport { CHART_SIDE_ELEMENTS, LEGEND_OFFSET, MIN_MARGIN, MIN_PADDING, TITLE_LINE } from './constants';\nimport type { CellBubble, GroupedCellsBubble } from './getGroupedCellsData';\nimport { calculateChartSideElementSizes, calculateSideElementsBBoxes } from './utils';\nimport { calculateCaptionTails } from './utils/calculateCaptionTails';\n\nconst getSteps = (count: number, valueExtent: number[]) => {\n    const min = Math.min(...valueExtent);\n    const max = Math.max(...valueExtent);\n    if (min === max) {\n        const steps = count % 2 === 0 ? [] : [min];\n        for (let i = 1; i < count / 2 + 1; i++) {\n            steps.push(min + i);\n            steps.unshift(min - i);\n        }\n        return steps;\n    }\n    if (count < 2) {\n        return [min, max];\n    }\n    const step = (max - min) / (count - 1);\n    const steps = [];\n    for (let i = 0; i < count - 1; i++) {\n        steps.push(min + step * i);\n    }\n    steps.push(max);\n    return steps;\n};\n\nfunction getContinuousColorRange(\n    normalization: BubbleSettingsImpl['normalization'],\n    colorsCount: number,\n    valueExtent: number[]\n) {\n    let extent = valueExtent;\n    if (normalization) {\n        if (normalization.colorRange) {\n            extent = normalization.colorRange;\n        }\n        if (normalization.method === 'standardScaling') {\n            extent = [-2, 2];\n        }\n        if (normalization.method === 'meanNormalization') {\n            extent = [-0.75, 0.75];\n        }\n    }\n    return getSteps(colorsCount, extent);\n}\n\nclass ChartRenderer {\n    reactRoot: Root | null = null;\n    parentNode: HTMLElement | null = null;\n    rootNode: HTMLElement | null = null;\n    component: ReactElement = (<></>);\n    chartsDimensions: Record<string, ChartDimensionsData> = {};\n    chartSizes: ChartSizes = {\n        chartWidth: DEFAULT_WIDTH, // width of single chart\n        chartHeight: DEFAULT_HEIGHT, // height of single chart\n        chartsWidth: DEFAULT_WIDTH, // width of all charts in charts row\n        chartsHeight: DEFAULT_HEIGHT, // width of all charts in charts column, without axes\n        totalWidth: DEFAULT_WIDTH, // width of all charts in charts row, plus left axis, plus legend\n        totalHeight: DEFAULT_HEIGHT, // width of all charts in charts height, plus bottom axis, plus top title\n    };\n    margins: Margins = {\n        top: MIN_MARGIN,\n        bottom: MIN_MARGIN,\n        left: MIN_MARGIN,\n        right: MIN_MARGIN,\n    };\n    captionsSizes: CaptionsSizes = {\n        xAxisCaptions: 100,\n        yAxisCaptions: 100,\n        xCaptionTail: 0,\n        yCaptionTail: 0,\n    };\n    labelAngles: LabelAngles = {\n        xAxisLabels: 0,\n        yAxisLabels: 0,\n    };\n    columnsCount = 1;\n    rowsCount = 1;\n    scales: ChartScales = {\n        x: scaleOrdinal<string, number>().domain(['null']).range([1]),\n        y: scaleOrdinal<string, number>().domain(['null']).range([1]),\n    };\n    step: {x: number; y: number} = {x: 10, y: 10};\n    colorScale: ScaleLinear<string, string> = scaleLinear<string, string>().domain([0, 1]).range(['white', 'black']);\n    sizeScale: ScalePower<number, number> = scaleSqrt().domain([0, 1]).range([3, 20]);\n    legend: LegendData = {\n        width: 0,\n        height: 0,\n        items: [],\n    };\n\n    clear() {\n        if (this.parentNode && this.rootNode) {\n            this.parentNode?.removeChild(this.rootNode);\n            this.parentNode = null;\n            this.rootNode = null;\n        }\n        // timeout to avoid trying to unmount during rendering\n        setTimeout(() => {\n            this.reactRoot?.unmount();\n            this.reactRoot = null;\n        });\n    }\n\n    init(node: HTMLElement) {\n        if (this.parentNode === null) {\n            this.parentNode = node;\n            this.rootNode = document.createElement('div');\n            this.parentNode.appendChild(this.rootNode);\n            this.reactRoot = createRoot(this.rootNode);\n        }\n    }\n\n    updateMargins(title: BubbleSettingsImpl['chartSettings']['title']) {\n        this.margins = {\n            top: title.show ? TITLE_LINE_HEIGHT + TITLE_MARGIN * 2 : MIN_MARGIN,\n            bottom: MIN_MARGIN,\n            left: MIN_MARGIN,\n            right: this.legend.width,\n        };\n        this.chartSizes.totalWidth = this.margins.left + this.chartSizes.chartsWidth + this.margins.right;\n        this.chartSizes.totalHeight =\n            this.margins.top + Math.max(this.chartSizes.chartsHeight, this.legend.height) + this.margins.bottom;\n    }\n\n    updateLegendSize(\n        legend: BubbleSettingsImpl['chartSettings']['legend'],\n        columnValueColor: ColumnName,\n        columnValueSize: ColumnName,\n        facetKeys: string[]\n    ) {\n        if (!legend.show) {\n            this.legend = {width: 0, height: 0, items: []};\n            return;\n        }\n\n        const legendItems: LegendItem[] = [];\n        const continuousHeight = Math.min(\n            Math.max(this.chartSizes.chartHeight, MIN_LEGEND_GRADIENT_HEIGHT),\n            MAX_LEGEND_GRADIENT_HEIGHT\n        );\n        const legendHeight = Math.max(this.chartSizes.chartHeight, continuousHeight);\n        const emptySizes = {width:0, height:0, left:0, top: 0};\n\n        const colorDomain = this.colorScale.domain();\n        const colorValues = getContinuousLegendTicks(this.colorScale, [\n            colorDomain[0],\n            colorDomain[colorDomain.length - 1],\n        ]);\n        const colorTitle = columnValueColor.label ?? columnValueColor.value;\n        const tickPositionScale = scaleLinear([colorValues[0], colorValues[colorValues.length - 1]], [continuousHeight, 0]); //TODO: update during adding log scale for heatmap\n        \n        legendItems.push({\n            id: 'colorValue',\n            type: 'continuous',\n            scale: this.colorScale,\n            tickPositionScale,\n            values: colorValues,\n            title: colorTitle,\n            ...emptySizes\n        });\n\n        const sizeLegendItem = getSizeLegendItem({\n            columnName: columnValueSize,\n            domain: this.sizeScale.domain(),\n            range: this.sizeScale.range(),\n        });\n        legendItems.push({...sizeLegendItem, id: 'sizeValue'});\n\n        if (!legendItems.length) {\n            this.legend = {width: 0, height: 0, items: []};\n            return;\n        }\n\n        const items = arrangeLegendParts(legendItems, legendHeight, continuousHeight);\n\n        const maxRightEdge = items.reduce((max, item) => Math.max(max, item.left + item.width), 0);\n        const legendWidth = maxRightEdge + 2 * LEGEND_OFFSET;\n\n        const leftTopChartPadding = this.chartsDimensions[facetKeys[0]].padding; // additional offset of legend for alignment with chart\n\n        this.legend = {\n            width: legendWidth,\n            height: legendHeight + leftTopChartPadding.top,\n            items: items,\n        };\n    }\n\n    updateCaptionsSize(\n        groupedCells: GroupedCellsBubble,\n        xAxis: BubbleSettingsImpl['chartSettings']['xAxis'],\n        yAxis: BubbleSettingsImpl['chartSettings']['yAxis']\n    ) {\n        const textMeasurer = new TextMeasurer('bold 14px Arial');\n        const {xKeys, yKeys, xLabels, yLabels} = groupedCells.meta;\n        this.labelAngles = {\n            xAxisLabels: xAxis.axisLabelsAngle,\n            yAxisLabels: yAxis.axisLabelsAngle,\n        };\n        let maxXLabelSize = 0;\n        let maxYLabelSize = 0;\n        for (const xKey of xKeys) {\n            const l = textMeasurer.getTextWidth(xLabels[xKey]);\n            if (l > maxXLabelSize) {\n                maxXLabelSize = l;\n            }\n        }\n        for (const yKey of yKeys) {\n            const l = textMeasurer.getTextWidth(yLabels[yKey]);\n            if (l > maxYLabelSize) {\n                maxYLabelSize = l;\n            }\n        }\n        const {xCaptionTail, yCaptionTail} = calculateCaptionTails(\n            this.labelAngles,\n            this.step,\n            groupedCells,\n            textMeasurer\n        );\n        const xLabelAngle = (this.labelAngles.xAxisLabels / 180) * Math.PI;\n        const yLabelAngle = (this.labelAngles.yAxisLabels / 180) * Math.PI;\n        this.captionsSizes = {\n            xCaptionTail,\n            yCaptionTail,\n            xAxisCaptions: maxXLabelSize * Math.sin(xLabelAngle) || TITLE_LINE,\n            yAxisCaptions: maxYLabelSize * Math.sin(yLabelAngle) || TITLE_LINE,\n        };\n    }\n\n    updateChartDimensions(\n        facetKeys: string[],\n        facetSettings: BubbleSettingsImpl['facetSettings'],\n        xAxis: BubbleSettingsImpl['chartSettings']['xAxis'],\n        yAxis: BubbleSettingsImpl['chartSettings']['yAxis']\n    ) {\n        const facetCount = facetKeys.length;\n        const maxNRows = Math.min(facetSettings.nRows ?? facetCount, facetCount);\n        const maxNCols = Math.min(facetSettings.nCols ?? facetCount, facetCount);\n        // Use columns/rows count from settings if some of them defined, else make 1 column\n        this.columnsCount = facetSettings.nRows ? Math.ceil(facetCount / maxNRows) : maxNCols;\n        this.rowsCount = Math.ceil(facetCount / this.columnsCount);\n        this.chartsDimensions = {};\n\n        let currentLeft = 0;\n        let currentTop = 0;\n        facetKeys.forEach((key, index) => {\n            const currentColumn = (index % this.columnsCount) + 1;\n            const chartSides = getChartEdgeSides(index, facetKeys.length, this.columnsCount, this.rowsCount);\n            const width = this.chartSizes.chartWidth;\n            const height = this.chartSizes.chartHeight;\n            const sideElementSizes = calculateChartSideElementSizes(\n                xAxis,\n                yAxis,\n                this.captionsSizes,\n                chartSides,\n                facetKeys,\n                this.step.x,\n                this.step.y\n            );\n\n            function getPadding(side: 'left' | 'right' | 'top' | 'bottom') {\n                return Math.max(\n                    CHART_SIDE_ELEMENTS[side].reduce((res, el) => res + sideElementSizes[side][el], 0),\n                    MIN_PADDING\n                );\n            }\n\n            const padding = {\n                left: getPadding('left'),\n                right: getPadding('right'),\n                top: getPadding('top'),\n                bottom: getPadding('bottom'),\n            };\n            if (padding.left < this.captionsSizes.xCaptionTail) {\n                padding.left = this.captionsSizes.xCaptionTail;\n            }\n            if (padding.bottom < this.captionsSizes.yCaptionTail) {\n                padding.bottom = this.captionsSizes.yCaptionTail;\n            }\n            const sideElementBBoxes = calculateSideElementsBBoxes(sideElementSizes, width, height);\n            const outerWidth = width + padding.left + padding.right;\n            const outerHeight = height + padding.top + padding.bottom;\n            this.chartsDimensions[key] = {\n                left: currentLeft,\n                top: currentTop,\n                inner: {width, height},\n                outer: {width: outerWidth, height: outerHeight},\n                padding,\n                sideElementBBoxes,\n                chartEdgeSides: chartSides,\n            };\n            currentLeft += outerWidth;\n            if (currentColumn === this.columnsCount) {\n                currentLeft = 0;\n                currentTop += outerHeight;\n            }\n        });\n\n        // sum of widths of first row\n        const chartsWidth = facetKeys\n            .slice(0, this.columnsCount)\n            .reduce((sum, key) => sum + this.chartsDimensions[key].outer.width, 0);\n        // sum of heights of first column\n        const chartsHeight = facetKeys\n            .filter((_key, index) => index % this.columnsCount === 0)\n            .reduce((sum, key) => sum + this.chartsDimensions[key].outer.height, 0);\n        this.chartSizes.chartsWidth = chartsWidth;\n        this.chartSizes.chartsHeight = chartsHeight;\n    }\n\n    updateChartsSizes(groupedCellsData: GroupedCellsBubble, size: BubbleSettingsImpl['chartSettings']['size']) {\n        const {width, height, cellSize} = size;\n        if (cellSize) {\n            this.chartSizes.chartWidth = groupedCellsData.meta.xKeys.length * cellSize;\n            this.chartSizes.chartHeight = groupedCellsData.meta.yKeys.length * cellSize;\n        }\n        if (width && height) {\n            this.chartSizes.chartWidth = width;\n            this.chartSizes.chartHeight = height;\n        }\n    }\n\n    // update scales for cell positions, x and y for each facet\n    updateScales(\n        groupedCells: GroupedCellsBubble,\n        size: BubbleSettingsImpl['chartSettings']['size'],\n        xAxis: BubbleSettingsImpl['chartSettings']['xAxis'],\n        yAxis: BubbleSettingsImpl['chartSettings']['yAxis'],\n        customOrder: {x: boolean, y: boolean, xGroup: boolean, yGroup: boolean},\n    ) {\n        const {width, height, cellSize} = size;\n        const {meta} = groupedCells;\n        const sortX = (arr: string[], labels: Record<string, string> = {}) => {\n            return [...arr].sort((a, b) => xAxis.sorting === 'asc'\n                ? (labels[a] ?? a).localeCompare((labels[b] ?? b), 'en', {numeric: true})\n                : (labels[b] ?? b).localeCompare((labels[a] ?? a), 'en', {numeric: true})\n            );\n        };\n        const sortY = (arr: string[], labels: Record<string, string> = {}) => {\n            return [...arr].sort((a, b) => yAxis.sorting === 'asc'\n                ? (labels[a] ?? a).localeCompare((labels[b] ?? b), 'en', {numeric: true})\n                : (labels[b] ?? b).localeCompare((labels[a] ?? a), 'en', {numeric: true})\n            );\n        };\n        const xGroupKeys = customOrder.xGroup ? meta.xGroupKeys : sortX(meta.xGroupKeys);\n        const yGroupKeys = customOrder.yGroup ? meta.yGroupKeys : sortY(meta.yGroupKeys);\n        const { xKeysByGroups, yKeysByGroups } = meta;\n\n        const xKeys = xGroupKeys.reduce((res: string[], xGroupKey: string) => {\n            res = res.concat(sortX(xKeysByGroups[xGroupKey], meta.xLabels));\n            return res;\n        }, []);\n        const yKeys = yGroupKeys.reduce((res: string[], yGroupKey: string) => {\n            res = res.concat(sortY(yKeysByGroups[yGroupKey], meta.yLabels));\n            return res;\n        }, []);\n        if (cellSize) {\n            this.step.x = cellSize;\n            this.step.y = cellSize;\n        } else if (width && height) {\n            this.step.x = width / xKeys.length;\n            this.step.y = height / yKeys.length;\n        }\n        const xPositions: number[] = new Array(xKeys.length).fill(null).map((_v, idx) => idx * this.step.x);\n        const yPositions: number[] = new Array(yKeys.length).fill(null).map((_v, idx) => idx * this.step.y);\n        this.scales.x = scaleOrdinal<string, number>().domain(xKeys).range(xPositions);\n        this.scales.y = scaleOrdinal<string, number>().domain(yKeys).range(yPositions);\n    }\n\n    updateAesScale(\n        aes: BubbleSettingsImpl['aes'],\n        valueExtentSize: [number, number],\n        valueExtentColor: [number, number],\n        normalization: BubbleSettingsImpl['normalization']\n    ) {\n        this.colorScale = scaleLinear<string, string>()\n            .domain(getContinuousColorRange(normalization, aes.colorsList.length, valueExtentColor))\n            .range(aes.colorsList);\n        this.sizeScale = scaleSqrt(valueExtentSize, [aes.minRadius, aes.maxRadius]);\n    }\n\n    render(\n        dataFrame: DataFrame,\n        settingsId: string,\n        chartSettings: BubbleSettingsImpl['chartSettings'],\n        facetSettings: BubbleSettingsImpl['facetSettings'],\n        groupedCellsData: GroupedCellsBubble,\n        valueColumnColor: ColumnName,\n        valueColumnSize: ColumnName,\n        normalization: BubbleSettingsImpl['normalization'],\n        aes: BubbleSettingsImpl['aes'],\n        getCellTooltip: (cell: CellBubble) => string[],\n        onTooltipHintSwitch: (v:boolean) => void,\n        customOrder: {x: boolean, y: boolean, xGroup: boolean, yGroup: boolean},\n    ) {\n        const {meta, facets, meta: { facetKeys }} = groupedCellsData;\n        const {valueExtent} = meta;\n        const {xAxis, yAxis, title, size} = chartSettings;\n        this.updateChartsSizes(groupedCellsData, size);\n        this.updateAesScale(aes, valueExtent.sizeValue, valueExtent.colorValue, normalization);\n        this.updateScales(groupedCellsData, size, chartSettings.xAxis, chartSettings.yAxis, customOrder);\n        // caption sizes are needed for chart paddings in chart dimensions\n        this.updateCaptionsSize(groupedCellsData, xAxis, yAxis);\n        this.updateChartDimensions(facetKeys, facetSettings, xAxis, yAxis);\n        this.updateLegendSize(chartSettings.legend, valueColumnColor, valueColumnSize, facetKeys);\n        this.updateMargins(title);\n        const component = (\n            <DataFrameProvider dataFrame={dataFrame}>\n                <ChartsGroup\n                    aes={aes}\n                    captionsSizes={this.captionsSizes}\n                    cellsMeta={meta}\n                    columnsCount={this.columnsCount}\n                    chartsDimensions={this.chartsDimensions}\n                    chartSettings={chartSettings}\n                    chartSizes={this.chartSizes}\n                    sizeScale={this.sizeScale as (v: DataValue) => number}\n                    colorScale={this.colorScale as (v: DataValue) => string}\n                    facetKeys={facetKeys}\n                    facetSettings={facetSettings}\n                    groupedCells={facets}\n                    labelAngles={this.labelAngles}\n                    legend={this.legend}\n                    margins={this.margins}\n                    scales={this.scales}\n                    settingsId={settingsId}\n                    step={this.step}\n                    getCellTooltip={getCellTooltip}\n                    onTooltipHintSwitch={onTooltipHintSwitch}\n                />\n            </DataFrameProvider>\n        );\n        this.component = component;\n        this.reactRoot?.render(component);\n    }\n\n    renderError(message: string) {\n        this.reactRoot?.render(<Error message={message} />);\n    }\n}\n\nexport default ChartRenderer;\n"],"names":["getSteps","count","valueExtent","min","max","steps","i","step","getContinuousColorRange","normalization","colorsCount","extent","ChartRenderer","__publicField","jsx","Fragment","DEFAULT_WIDTH","DEFAULT_HEIGHT","MIN_MARGIN","scaleOrdinal","scaleLinear","scaleSqrt","_a","node","createRoot","title","TITLE_LINE_HEIGHT","TITLE_MARGIN","legend","columnValueColor","columnValueSize","facetKeys","legendItems","continuousHeight","MIN_LEGEND_GRADIENT_HEIGHT","MAX_LEGEND_GRADIENT_HEIGHT","legendHeight","emptySizes","colorDomain","colorValues","getContinuousLegendTicks","colorTitle","tickPositionScale","sizeLegendItem","getSizeLegendItem","items","arrangeLegendParts","legendWidth","item","LEGEND_OFFSET","leftTopChartPadding","groupedCells","xAxis","yAxis","textMeasurer","TextMeasurer","xKeys","yKeys","xLabels","yLabels","maxXLabelSize","maxYLabelSize","xKey","yKey","xCaptionTail","yCaptionTail","calculateCaptionTails","xLabelAngle","yLabelAngle","TITLE_LINE","facetSettings","facetCount","maxNRows","maxNCols","currentLeft","currentTop","key","index","currentColumn","chartSides","getChartEdgeSides","width","height","sideElementSizes","calculateChartSideElementSizes","getPadding","side","CHART_SIDE_ELEMENTS","res","el","MIN_PADDING","padding","sideElementBBoxes","calculateSideElementsBBoxes","outerWidth","outerHeight","chartsWidth","sum","chartsHeight","_key","groupedCellsData","size","cellSize","customOrder","meta","sortX","arr","labels","a","b","sortY","xGroupKeys","yGroupKeys","xKeysByGroups","yKeysByGroups","xGroupKey","yGroupKey","xPositions","_v","idx","yPositions","aes","valueExtentSize","valueExtentColor","dataFrame","settingsId","chartSettings","valueColumnColor","valueColumnSize","getCellTooltip","onTooltipHintSwitch","facets","component","DataFrameProvider","ChartsGroup","message","Error"],"mappings":"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"}
+{"version":3,"file":"ChartRenderer.js","names":[],"sources":["../../src/bubble/ChartRenderer.tsx"],"sourcesContent":["import type { ScaleLinear, ScalePower } from 'd3-scale';\nimport { scaleLinear, scaleOrdinal, scaleSqrt } from 'd3-scale';\nimport type { ReactElement } from 'react';\nimport type { Root } from 'react-dom/client';\nimport { createRoot } from 'react-dom/client';\nimport { Error } from '../common/Error';\nimport type { LegendData, LegendItem } from '../common/types';\nimport { DataFrameProvider } from '../common/useDataFrame';\nimport { DEFAULT_HEIGHT, DEFAULT_WIDTH, MAX_LEGEND_GRADIENT_HEIGHT, MIN_LEGEND_GRADIENT_HEIGHT, TITLE_LINE_HEIGHT, TITLE_MARGIN } from '../constants';\nimport type { DataFrame } from '../DataFrame';\nimport type { ColumnName, DataValue } from '../types';\nimport { arrangeLegendParts } from '../utils/arrangeLegendParts';\nimport { getSizeLegendItem } from '../utils/getSizeLegendItem';\nimport { getChartEdgeSides } from '../utils/getChartEdgeSides';\nimport { getContinuousLegendTicks } from '../utils/getContinuousLegendTicks';\nimport { TextMeasurer } from '../utils/TextMeasurer/TextMeasurer';\nimport type { BubbleSettingsImpl } from './BubbleSettingsImpl';\nimport { ChartsGroup } from './components/ChartsGroup';\nimport type {\n    CaptionsSizes,\n    ChartDimensionsData, ChartScales, ChartSizes,\n    LabelAngles,\n    Margins\n} from './components/types';\nimport { CHART_SIDE_ELEMENTS, LEGEND_OFFSET, MIN_MARGIN, MIN_PADDING, TITLE_LINE } from './constants';\nimport type { CellBubble, GroupedCellsBubble } from './getGroupedCellsData';\nimport { calculateChartSideElementSizes, calculateSideElementsBBoxes } from './utils';\nimport { calculateCaptionTails } from './utils/calculateCaptionTails';\n\nconst getSteps = (count: number, valueExtent: number[]) => {\n    const min = Math.min(...valueExtent);\n    const max = Math.max(...valueExtent);\n    if (min === max) {\n        const steps = count % 2 === 0 ? [] : [min];\n        for (let i = 1; i < count / 2 + 1; i++) {\n            steps.push(min + i);\n            steps.unshift(min - i);\n        }\n        return steps;\n    }\n    if (count < 2) {\n        return [min, max];\n    }\n    const step = (max - min) / (count - 1);\n    const steps = [];\n    for (let i = 0; i < count - 1; i++) {\n        steps.push(min + step * i);\n    }\n    steps.push(max);\n    return steps;\n};\n\nfunction getContinuousColorRange(\n    normalization: BubbleSettingsImpl['normalization'],\n    colorsCount: number,\n    valueExtent: number[]\n) {\n    let extent = valueExtent;\n    if (normalization) {\n        if (normalization.colorRange) {\n            extent = normalization.colorRange;\n        }\n        if (normalization.method === 'standardScaling') {\n            extent = [-2, 2];\n        }\n        if (normalization.method === 'meanNormalization') {\n            extent = [-0.75, 0.75];\n        }\n    }\n    return getSteps(colorsCount, extent);\n}\n\nclass ChartRenderer {\n    reactRoot: Root | null = null;\n    parentNode: HTMLElement | null = null;\n    rootNode: HTMLElement | null = null;\n    component: ReactElement = (<></>);\n    chartsDimensions: Record<string, ChartDimensionsData> = {};\n    chartSizes: ChartSizes = {\n        chartWidth: DEFAULT_WIDTH, // width of single chart\n        chartHeight: DEFAULT_HEIGHT, // height of single chart\n        chartsWidth: DEFAULT_WIDTH, // width of all charts in charts row\n        chartsHeight: DEFAULT_HEIGHT, // width of all charts in charts column, without axes\n        totalWidth: DEFAULT_WIDTH, // width of all charts in charts row, plus left axis, plus legend\n        totalHeight: DEFAULT_HEIGHT, // width of all charts in charts height, plus bottom axis, plus top title\n    };\n    margins: Margins = {\n        top: MIN_MARGIN,\n        bottom: MIN_MARGIN,\n        left: MIN_MARGIN,\n        right: MIN_MARGIN,\n    };\n    captionsSizes: CaptionsSizes = {\n        xAxisCaptions: 100,\n        yAxisCaptions: 100,\n        xCaptionTail: 0,\n        yCaptionTail: 0,\n    };\n    labelAngles: LabelAngles = {\n        xAxisLabels: 0,\n        yAxisLabels: 0,\n    };\n    columnsCount = 1;\n    rowsCount = 1;\n    scales: ChartScales = {\n        x: scaleOrdinal<string, number>().domain(['null']).range([1]),\n        y: scaleOrdinal<string, number>().domain(['null']).range([1]),\n    };\n    step: {x: number; y: number} = {x: 10, y: 10};\n    colorScale: ScaleLinear<string, string> = scaleLinear<string, string>().domain([0, 1]).range(['white', 'black']);\n    sizeScale: ScalePower<number, number> = scaleSqrt().domain([0, 1]).range([3, 20]);\n    legend: LegendData = {\n        width: 0,\n        height: 0,\n        items: [],\n    };\n\n    clear() {\n        if (this.parentNode && this.rootNode) {\n            this.parentNode?.removeChild(this.rootNode);\n            this.parentNode = null;\n            this.rootNode = null;\n        }\n        // timeout to avoid trying to unmount during rendering\n        setTimeout(() => {\n            this.reactRoot?.unmount();\n            this.reactRoot = null;\n        });\n    }\n\n    init(node: HTMLElement) {\n        if (this.parentNode === null) {\n            this.parentNode = node;\n            this.rootNode = document.createElement('div');\n            this.parentNode.appendChild(this.rootNode);\n            this.reactRoot = createRoot(this.rootNode);\n        }\n    }\n\n    updateMargins(title: BubbleSettingsImpl['chartSettings']['title']) {\n        this.margins = {\n            top: title.show ? TITLE_LINE_HEIGHT + TITLE_MARGIN * 2 : MIN_MARGIN,\n            bottom: MIN_MARGIN,\n            left: MIN_MARGIN,\n            right: this.legend.width,\n        };\n        this.chartSizes.totalWidth = this.margins.left + this.chartSizes.chartsWidth + this.margins.right;\n        this.chartSizes.totalHeight =\n            this.margins.top + Math.max(this.chartSizes.chartsHeight, this.legend.height) + this.margins.bottom;\n    }\n\n    updateLegendSize(\n        legend: BubbleSettingsImpl['chartSettings']['legend'],\n        columnValueColor: ColumnName,\n        columnValueSize: ColumnName,\n        facetKeys: string[]\n    ) {\n        if (!legend.show) {\n            this.legend = {width: 0, height: 0, items: []};\n            return;\n        }\n\n        const legendItems: LegendItem[] = [];\n        const continuousHeight = Math.min(\n            Math.max(this.chartSizes.chartHeight, MIN_LEGEND_GRADIENT_HEIGHT),\n            MAX_LEGEND_GRADIENT_HEIGHT\n        );\n        const legendHeight = Math.max(this.chartSizes.chartHeight, continuousHeight);\n        const emptySizes = {width:0, height:0, left:0, top: 0};\n\n        const colorDomain = this.colorScale.domain();\n        const colorValues = getContinuousLegendTicks(this.colorScale, [\n            colorDomain[0],\n            colorDomain[colorDomain.length - 1],\n        ]);\n        const colorTitle = columnValueColor.label ?? columnValueColor.value;\n        const tickPositionScale = scaleLinear([colorValues[0], colorValues[colorValues.length - 1]], [continuousHeight, 0]); //TODO: update during adding log scale for heatmap\n        \n        legendItems.push({\n            id: 'colorValue',\n            type: 'continuous',\n            scale: this.colorScale,\n            tickPositionScale,\n            values: colorValues,\n            title: colorTitle,\n            ...emptySizes\n        });\n\n        const sizeLegendItem = getSizeLegendItem({\n            columnName: columnValueSize,\n            domain: this.sizeScale.domain(),\n            range: this.sizeScale.range(),\n        });\n        legendItems.push({...sizeLegendItem, id: 'sizeValue'});\n\n        if (!legendItems.length) {\n            this.legend = {width: 0, height: 0, items: []};\n            return;\n        }\n\n        const items = arrangeLegendParts(legendItems, legendHeight, continuousHeight);\n\n        const maxRightEdge = items.reduce((max, item) => Math.max(max, item.left + item.width), 0);\n        const legendWidth = maxRightEdge + 2 * LEGEND_OFFSET;\n\n        const leftTopChartPadding = this.chartsDimensions[facetKeys[0]].padding; // additional offset of legend for alignment with chart\n\n        this.legend = {\n            width: legendWidth,\n            height: legendHeight + leftTopChartPadding.top,\n            items: items,\n        };\n    }\n\n    updateCaptionsSize(\n        groupedCells: GroupedCellsBubble,\n        xAxis: BubbleSettingsImpl['chartSettings']['xAxis'],\n        yAxis: BubbleSettingsImpl['chartSettings']['yAxis']\n    ) {\n        const textMeasurer = new TextMeasurer('bold 14px Arial');\n        const {xKeys, yKeys, xLabels, yLabels} = groupedCells.meta;\n        this.labelAngles = {\n            xAxisLabels: xAxis.axisLabelsAngle,\n            yAxisLabels: yAxis.axisLabelsAngle,\n        };\n        let maxXLabelSize = 0;\n        let maxYLabelSize = 0;\n        for (const xKey of xKeys) {\n            const l = textMeasurer.getTextWidth(xLabels[xKey]);\n            if (l > maxXLabelSize) {\n                maxXLabelSize = l;\n            }\n        }\n        for (const yKey of yKeys) {\n            const l = textMeasurer.getTextWidth(yLabels[yKey]);\n            if (l > maxYLabelSize) {\n                maxYLabelSize = l;\n            }\n        }\n        const {xCaptionTail, yCaptionTail} = calculateCaptionTails(\n            this.labelAngles,\n            this.step,\n            groupedCells,\n            textMeasurer\n        );\n        const xLabelAngle = (this.labelAngles.xAxisLabels / 180) * Math.PI;\n        const yLabelAngle = (this.labelAngles.yAxisLabels / 180) * Math.PI;\n        this.captionsSizes = {\n            xCaptionTail,\n            yCaptionTail,\n            xAxisCaptions: maxXLabelSize * Math.sin(xLabelAngle) || TITLE_LINE,\n            yAxisCaptions: maxYLabelSize * Math.sin(yLabelAngle) || TITLE_LINE,\n        };\n    }\n\n    updateChartDimensions(\n        facetKeys: string[],\n        facetSettings: BubbleSettingsImpl['facetSettings'],\n        xAxis: BubbleSettingsImpl['chartSettings']['xAxis'],\n        yAxis: BubbleSettingsImpl['chartSettings']['yAxis']\n    ) {\n        const facetCount = facetKeys.length;\n        const maxNRows = Math.min(facetSettings.nRows ?? facetCount, facetCount);\n        const maxNCols = Math.min(facetSettings.nCols ?? facetCount, facetCount);\n        // Use columns/rows count from settings if some of them defined, else make 1 column\n        this.columnsCount = facetSettings.nRows ? Math.ceil(facetCount / maxNRows) : maxNCols;\n        this.rowsCount = Math.ceil(facetCount / this.columnsCount);\n        this.chartsDimensions = {};\n\n        let currentLeft = 0;\n        let currentTop = 0;\n        facetKeys.forEach((key, index) => {\n            const currentColumn = (index % this.columnsCount) + 1;\n            const chartSides = getChartEdgeSides(index, facetKeys.length, this.columnsCount, this.rowsCount);\n            const width = this.chartSizes.chartWidth;\n            const height = this.chartSizes.chartHeight;\n            const sideElementSizes = calculateChartSideElementSizes(\n                xAxis,\n                yAxis,\n                this.captionsSizes,\n                chartSides,\n                facetKeys,\n                this.step.x,\n                this.step.y\n            );\n\n            function getPadding(side: 'left' | 'right' | 'top' | 'bottom') {\n                return Math.max(\n                    CHART_SIDE_ELEMENTS[side].reduce((res, el) => res + sideElementSizes[side][el], 0),\n                    MIN_PADDING\n                );\n            }\n\n            const padding = {\n                left: getPadding('left'),\n                right: getPadding('right'),\n                top: getPadding('top'),\n                bottom: getPadding('bottom'),\n            };\n            if (padding.left < this.captionsSizes.xCaptionTail) {\n                padding.left = this.captionsSizes.xCaptionTail;\n            }\n            if (padding.bottom < this.captionsSizes.yCaptionTail) {\n                padding.bottom = this.captionsSizes.yCaptionTail;\n            }\n            const sideElementBBoxes = calculateSideElementsBBoxes(sideElementSizes, width, height);\n            const outerWidth = width + padding.left + padding.right;\n            const outerHeight = height + padding.top + padding.bottom;\n            this.chartsDimensions[key] = {\n                left: currentLeft,\n                top: currentTop,\n                inner: {width, height},\n                outer: {width: outerWidth, height: outerHeight},\n                padding,\n                sideElementBBoxes,\n                chartEdgeSides: chartSides,\n            };\n            currentLeft += outerWidth;\n            if (currentColumn === this.columnsCount) {\n                currentLeft = 0;\n                currentTop += outerHeight;\n            }\n        });\n\n        // sum of widths of first row\n        const chartsWidth = facetKeys\n            .slice(0, this.columnsCount)\n            .reduce((sum, key) => sum + this.chartsDimensions[key].outer.width, 0);\n        // sum of heights of first column\n        const chartsHeight = facetKeys\n            .filter((_key, index) => index % this.columnsCount === 0)\n            .reduce((sum, key) => sum + this.chartsDimensions[key].outer.height, 0);\n        this.chartSizes.chartsWidth = chartsWidth;\n        this.chartSizes.chartsHeight = chartsHeight;\n    }\n\n    updateChartsSizes(groupedCellsData: GroupedCellsBubble, size: BubbleSettingsImpl['chartSettings']['size']) {\n        const {width, height, cellSize} = size;\n        if (cellSize) {\n            this.chartSizes.chartWidth = groupedCellsData.meta.xKeys.length * cellSize;\n            this.chartSizes.chartHeight = groupedCellsData.meta.yKeys.length * cellSize;\n        }\n        if (width && height) {\n            this.chartSizes.chartWidth = width;\n            this.chartSizes.chartHeight = height;\n        }\n    }\n\n    // update scales for cell positions, x and y for each facet\n    updateScales(\n        groupedCells: GroupedCellsBubble,\n        size: BubbleSettingsImpl['chartSettings']['size'],\n        xAxis: BubbleSettingsImpl['chartSettings']['xAxis'],\n        yAxis: BubbleSettingsImpl['chartSettings']['yAxis'],\n        customOrder: {x: boolean, y: boolean, xGroup: boolean, yGroup: boolean},\n    ) {\n        const {width, height, cellSize} = size;\n        const {meta} = groupedCells;\n        const sortX = (arr: string[], labels: Record<string, string> = {}) => {\n            return [...arr].sort((a, b) => xAxis.sorting === 'asc'\n                ? (labels[a] ?? a).localeCompare((labels[b] ?? b), 'en', {numeric: true})\n                : (labels[b] ?? b).localeCompare((labels[a] ?? a), 'en', {numeric: true})\n            );\n        };\n        const sortY = (arr: string[], labels: Record<string, string> = {}) => {\n            return [...arr].sort((a, b) => yAxis.sorting === 'asc'\n                ? (labels[a] ?? a).localeCompare((labels[b] ?? b), 'en', {numeric: true})\n                : (labels[b] ?? b).localeCompare((labels[a] ?? a), 'en', {numeric: true})\n            );\n        };\n        const xGroupKeys = customOrder.xGroup ? meta.xGroupKeys : sortX(meta.xGroupKeys);\n        const yGroupKeys = customOrder.yGroup ? meta.yGroupKeys : sortY(meta.yGroupKeys);\n        const { xKeysByGroups, yKeysByGroups } = meta;\n\n        const xKeys = xGroupKeys.reduce((res: string[], xGroupKey: string) => {\n            res = res.concat(sortX(xKeysByGroups[xGroupKey], meta.xLabels));\n            return res;\n        }, []);\n        const yKeys = yGroupKeys.reduce((res: string[], yGroupKey: string) => {\n            res = res.concat(sortY(yKeysByGroups[yGroupKey], meta.yLabels));\n            return res;\n        }, []);\n        if (cellSize) {\n            this.step.x = cellSize;\n            this.step.y = cellSize;\n        } else if (width && height) {\n            this.step.x = width / xKeys.length;\n            this.step.y = height / yKeys.length;\n        }\n        const xPositions: number[] = new Array(xKeys.length).fill(null).map((_v, idx) => idx * this.step.x);\n        const yPositions: number[] = new Array(yKeys.length).fill(null).map((_v, idx) => idx * this.step.y);\n        this.scales.x = scaleOrdinal<string, number>().domain(xKeys).range(xPositions);\n        this.scales.y = scaleOrdinal<string, number>().domain(yKeys).range(yPositions);\n    }\n\n    updateAesScale(\n        aes: BubbleSettingsImpl['aes'],\n        valueExtentSize: [number, number],\n        valueExtentColor: [number, number],\n        normalization: BubbleSettingsImpl['normalization']\n    ) {\n        this.colorScale = scaleLinear<string, string>()\n            .domain(getContinuousColorRange(normalization, aes.colorsList.length, valueExtentColor))\n            .range(aes.colorsList);\n        this.sizeScale = scaleSqrt(valueExtentSize, [aes.minRadius, aes.maxRadius]);\n    }\n\n    render(\n        dataFrame: DataFrame,\n        settingsId: string,\n        chartSettings: BubbleSettingsImpl['chartSettings'],\n        facetSettings: BubbleSettingsImpl['facetSettings'],\n        groupedCellsData: GroupedCellsBubble,\n        valueColumnColor: ColumnName,\n        valueColumnSize: ColumnName,\n        normalization: BubbleSettingsImpl['normalization'],\n        aes: BubbleSettingsImpl['aes'],\n        getCellTooltip: (cell: CellBubble) => string[],\n        onTooltipHintSwitch: (v:boolean) => void,\n        customOrder: {x: boolean, y: boolean, xGroup: boolean, yGroup: boolean},\n    ) {\n        const {meta, facets, meta: { facetKeys }} = groupedCellsData;\n        const {valueExtent} = meta;\n        const {xAxis, yAxis, title, size} = chartSettings;\n        this.updateChartsSizes(groupedCellsData, size);\n        this.updateAesScale(aes, valueExtent.sizeValue, valueExtent.colorValue, normalization);\n        this.updateScales(groupedCellsData, size, chartSettings.xAxis, chartSettings.yAxis, customOrder);\n        // caption sizes are needed for chart paddings in chart dimensions\n        this.updateCaptionsSize(groupedCellsData, xAxis, yAxis);\n        this.updateChartDimensions(facetKeys, facetSettings, xAxis, yAxis);\n        this.updateLegendSize(chartSettings.legend, valueColumnColor, valueColumnSize, facetKeys);\n        this.updateMargins(title);\n        const component = (\n            <DataFrameProvider dataFrame={dataFrame}>\n                <ChartsGroup\n                    aes={aes}\n                    captionsSizes={this.captionsSizes}\n                    cellsMeta={meta}\n                    columnsCount={this.columnsCount}\n                    chartsDimensions={this.chartsDimensions}\n                    chartSettings={chartSettings}\n                    chartSizes={this.chartSizes}\n                    sizeScale={this.sizeScale as (v: DataValue) => number}\n                    colorScale={this.colorScale as (v: DataValue) => string}\n                    facetKeys={facetKeys}\n                    facetSettings={facetSettings}\n                    groupedCells={facets}\n                    labelAngles={this.labelAngles}\n                    legend={this.legend}\n                    margins={this.margins}\n                    scales={this.scales}\n                    settingsId={settingsId}\n                    step={this.step}\n                    getCellTooltip={getCellTooltip}\n                    onTooltipHintSwitch={onTooltipHintSwitch}\n                />\n            </DataFrameProvider>\n        );\n        this.component = component;\n        this.reactRoot?.render(component);\n    }\n\n    renderError(message: string) {\n        this.reactRoot?.render(<Error message={message} />);\n    }\n}\n\nexport default ChartRenderer;\n"],"mappings":"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"}

package/dist/bubble/components/AxisCaptions.js

@@ -1,116 +1,98 @@
-import { j as t } from "../../_virtual/jsx-runtime.js";
-import { BLACK as a } from "../../constants.js";
-import { DEFAULT_TICKS_SIZE as A, TICK_OFFSET as m } from "../constants.js";
-function D({
-  sideElementBBoxes: i,
-  debug: g,
-  xKeys: L,
-  yKeys: S,
-  scales: w,
-  xAxis: T,
-  yAxis: j,
-  stepX: u,
-  stepY: z,
-  labelAngles: h,
-  xLabels: C,
-  yLabels: X
-}) {
-  const V = T.showTicks ? A : 0, k = j.showTicks ? A : 0, Y = i.top.axis.isVisible || i.bottom.axis.isVisible, r = i.top.axisTitle.isVisible ? i.top.axisTitle : i.bottom.axisTitle, l = i.top.axis.isVisible ? i.top.axis : i.bottom.axis, F = i.left.axis.isVisible || i.right.axis.isVisible, n = i.left.axisTitle.isVisible ? i.left.axisTitle : i.right.axisTitle, x = i.left.axis.isVisible ? i.left.axis : i.right.axis;
-  return /* @__PURE__ */ t.jsxs("g", { children: [
-    /* @__PURE__ */ t.jsxs("g", { children: [
-      r.isVisible && /* @__PURE__ */ t.jsxs("g", { transform: `translate(${r.x},${r.y})`, children: [
-        /* @__PURE__ */ t.jsx(
-          "text",
-          {
-            x: r.width / 2,
-            y: r.height / 2,
-            textAnchor: "middle",
-            dominantBaseline: "central",
-            children: T.title
-          }
-        ),
-        g && /* @__PURE__ */ t.jsx(
-          "rect",
-          {
-            width: r.width,
-            height: r.height,
-            stroke: a,
-            fill: "none"
-          }
-        )
-      ] }),
-      Y && /* @__PURE__ */ t.jsxs("g", { fontSize: "14px", transform: `translate(${l.x},${l.y})`, children: [
-        L.map((c) => {
-          const p = h.xAxisLabels !== 0, s = T.position === "bottom", e = s ? 0 : l.height, f = s ? e + V : e - V, y = s ? f + m : f - m, o = w.x(c) + u / 2, d = -h.xAxisLabels, $ = p ? s ? "end" : "start" : "middle";
-          return /* @__PURE__ */ t.jsxs("g", { children: [
-            /* @__PURE__ */ t.jsx("line", { x1: o, x2: o, y1: e, y2: f, stroke: a }),
-            /* @__PURE__ */ t.jsx(
-              "text",
-              {
-                x: o,
-                y,
-                textAnchor: $,
-                transform: `rotate(${d},${o},${y})`,
-                dominantBaseline: p ? "central" : s ? "hanging" : "auto",
-                children: C[c]
-              }
-            )
-          ] }, c);
-        }),
-        g && /* @__PURE__ */ t.jsx("rect", { width: l.width, height: l.height, stroke: a, fill: "none" })
-      ] })
-    ] }),
-    /* @__PURE__ */ t.jsxs("g", { children: [
-      n.isVisible && /* @__PURE__ */ t.jsx(
-        "g",
-        {
-          transform: `translate(
-                                ${n.x + n.width / 2},
-                                ${n.y + n.height / 2})`,
-          children: /* @__PURE__ */ t.jsx(
-            "text",
-            {
-              transform: `rotate(${j.position === "left" ? -90 : 90})`,
-              dominantBaseline: "central",
-              textAnchor: "middle",
-              children: j.title
-            }
-          )
-        }
-      ),
-      g && /* @__PURE__ */ t.jsx(
-        "rect",
-        {
-          x: n.x,
-          y: n.y,
-          width: n.width,
-          height: n.height,
-          stroke: a,
-          fill: "none"
-        }
-      ),
-      F && /* @__PURE__ */ t.jsx("g", { fontSize: "14px", transform: `translate(${x.x},${x.y})`, children: S.map((c) => {
-        const p = h.yAxisLabels !== 0, s = j.position === "left", e = -(90 - h.yAxisLabels), f = h.yAxisLabels === 0 ? "middle" : s ? "end" : "start", y = p ? "central" : s ? "auto" : "hanging", o = s ? x.width : 0, d = s ? o - k : o + k, $ = s ? d - m : d + m, b = w.y(c) + z / 2;
-        return /* @__PURE__ */ t.jsxs("g", { children: [
-          /* @__PURE__ */ t.jsx("line", { x1: o, x2: d, y1: b, y2: b, stroke: a }),
-          /* @__PURE__ */ t.jsx("text", { x: $, y: b, textAnchor: f, transform: `rotate(${e},${$},${b})`, dominantBaseline: y, children: X[c] })
-        ] }, c);
-      }) }),
-      g && /* @__PURE__ */ t.jsx(
-        "rect",
-        {
-          x: x.x,
-          y: x.y,
-          height: x.height,
-          width: x.width,
-          stroke: a,
-          fill: "none"
-        }
-      )
-    ] })
-  ] });
+import "../../constants.js";
+import "react";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+function n({ sideElementBBoxes: n, debug: r, xKeys: i, yKeys: a, scales: o, xAxis: s, yAxis: c, stepX: l, stepY: u, labelAngles: d, xLabels: f, yLabels: p }) {
+	let m = s.showTicks ? 4 : 0, h = c.showTicks ? 4 : 0, g = n.top.axis.isVisible || n.bottom.axis.isVisible, _ = n.top.axisTitle.isVisible ? n.top.axisTitle : n.bottom.axisTitle, v = n.top.axis.isVisible ? n.top.axis : n.bottom.axis, y = n.left.axis.isVisible || n.right.axis.isVisible, b = n.left.axisTitle.isVisible ? n.left.axisTitle : n.right.axisTitle, x = n.left.axis.isVisible ? n.left.axis : n.right.axis;
+	return /* @__PURE__ */ t("g", { children: [/* @__PURE__ */ t("g", { children: [_.isVisible && /* @__PURE__ */ t("g", {
+		transform: `translate(${_.x},${_.y})`,
+		children: [/* @__PURE__ */ e("text", {
+			x: _.width / 2,
+			y: _.height / 2,
+			textAnchor: "middle",
+			dominantBaseline: "central",
+			children: s.title
+		}), r && /* @__PURE__ */ e("rect", {
+			width: _.width,
+			height: _.height,
+			stroke: "#110529",
+			fill: "none"
+		})]
+	}), g && /* @__PURE__ */ t("g", {
+		fontSize: "14px",
+		transform: `translate(${v.x},${v.y})`,
+		children: [i.map((n) => {
+			let r = d.xAxisLabels !== 0, i = s.position === "bottom", a = i ? 0 : v.height, c = i ? a + m : a - m, u = i ? c + 4 : c - 4, p = o.x(n) + l / 2, h = -d.xAxisLabels;
+			return /* @__PURE__ */ t("g", { children: [/* @__PURE__ */ e("line", {
+				x1: p,
+				x2: p,
+				y1: a,
+				y2: c,
+				stroke: "#110529"
+			}), /* @__PURE__ */ e("text", {
+				x: p,
+				y: u,
+				textAnchor: r ? i ? "end" : "start" : "middle",
+				transform: `rotate(${h},${p},${u})`,
+				dominantBaseline: r ? "central" : i ? "hanging" : "auto",
+				children: f[n]
+			})] }, n);
+		}), r && /* @__PURE__ */ e("rect", {
+			width: v.width,
+			height: v.height,
+			stroke: "#110529",
+			fill: "none"
+		})]
+	})] }), /* @__PURE__ */ t("g", { children: [
+		b.isVisible && /* @__PURE__ */ e("g", {
+			transform: `translate(
+                                ${b.x + b.width / 2},
+                                ${b.y + b.height / 2})`,
+			children: /* @__PURE__ */ e("text", {
+				transform: `rotate(${c.position === "left" ? -90 : 90})`,
+				dominantBaseline: "central",
+				textAnchor: "middle",
+				children: c.title
+			})
+		}),
+		r && /* @__PURE__ */ e("rect", {
+			x: b.x,
+			y: b.y,
+			width: b.width,
+			height: b.height,
+			stroke: "#110529",
+			fill: "none"
+		}),
+		y && /* @__PURE__ */ e("g", {
+			fontSize: "14px",
+			transform: `translate(${x.x},${x.y})`,
+			children: a.map((n) => {
+				let r = d.yAxisLabels !== 0, i = c.position === "left", a = -(90 - d.yAxisLabels), s = d.yAxisLabels === 0 ? "middle" : i ? "end" : "start", l = r ? "central" : i ? "auto" : "hanging", f = i ? x.width : 0, m = i ? f - h : f + h, g = i ? m - 4 : m + 4, _ = o.y(n) + u / 2;
+				return /* @__PURE__ */ t("g", { children: [/* @__PURE__ */ e("line", {
+					x1: f,
+					x2: m,
+					y1: _,
+					y2: _,
+					stroke: "#110529"
+				}), /* @__PURE__ */ e("text", {
+					x: g,
+					y: _,
+					textAnchor: s,
+					transform: `rotate(${a},${g},${_})`,
+					dominantBaseline: l,
+					children: p[n]
+				})] }, n);
+			})
+		}),
+		r && /* @__PURE__ */ e("rect", {
+			x: x.x,
+			y: x.y,
+			height: x.height,
+			width: x.width,
+			stroke: "#110529",
+			fill: "none"
+		})
+	] })] });
 }
-export {
-  D as AxisCaptions
-};
-//# sourceMappingURL=AxisCaptions.js.map
+export { n as AxisCaptions };
+
+//# sourceMappingURL=AxisCaptions.js.map

package/dist/bubble/components/AxisCaptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"AxisCaptions.js","sources":["../../../src/bubble/components/AxisCaptions.tsx"],"sourcesContent":["import {BLACK} from '../../constants';\nimport type {ChartScales, ChartSideElementsBBoxes, LabelAngles} from './types';\nimport {DEFAULT_TICKS_SIZE, TICK_OFFSET} from '../constants';\nimport type {BubbleSettingsImpl} from '../BubbleSettingsImpl';\nimport React from 'react';\n\ninterface AxisCaptionsProps {\n    sideElementBBoxes: ChartSideElementsBBoxes;\n    debug: boolean;\n    xKeys: string[];\n    yKeys: string[];\n    scales: ChartScales;\n    xAxis: BubbleSettingsImpl['chartSettings']['xAxis'];\n    yAxis: BubbleSettingsImpl['chartSettings']['yAxis'];\n    stepX: number;\n    stepY: number;\n    labelAngles: LabelAngles;\n    xLabels: Record<string, string>;\n    yLabels: Record<string, string>;\n}\nexport function AxisCaptions({\n    sideElementBBoxes,\n    debug,\n    xKeys,\n    yKeys,\n    scales,\n    xAxis,\n    yAxis,\n    stepX,\n    stepY,\n    labelAngles,\n    xLabels,\n    yLabels\n}: AxisCaptionsProps) {\n    const tickSizeX = xAxis.showTicks ? DEFAULT_TICKS_SIZE : 0;\n    const tickSizeY = yAxis.showTicks ? DEFAULT_TICKS_SIZE : 0;\n\n    const xAxisVisible = sideElementBBoxes.top.axis.isVisible || sideElementBBoxes.bottom.axis.isVisible;\n    const xAxisTitleBBox = sideElementBBoxes.top.axisTitle.isVisible\n        ? sideElementBBoxes.top.axisTitle\n        : sideElementBBoxes.bottom.axisTitle;\n    const xAxisBBox = sideElementBBoxes.top.axis.isVisible ? sideElementBBoxes.top.axis : sideElementBBoxes.bottom.axis;\n\n    const yAxisVisible = sideElementBBoxes.left.axis.isVisible || sideElementBBoxes.right.axis.isVisible;\n    const yAxisTitleBBox = sideElementBBoxes.left.axisTitle.isVisible\n        ? sideElementBBoxes.left.axisTitle\n        : sideElementBBoxes.right.axisTitle;\n    const yAxisBBox = sideElementBBoxes.left.axis.isVisible\n        ? sideElementBBoxes.left.axis\n        : sideElementBBoxes.right.axis;\n    return (\n        <g>\n            {/* x-axis title, ticks and captions */}\n            <g>\n                {xAxisTitleBBox.isVisible && (\n                    <g transform={`translate(${xAxisTitleBBox.x},${xAxisTitleBBox.y})`}>\n                        <text\n                            x={xAxisTitleBBox.width / 2}\n                            y={xAxisTitleBBox.height / 2}\n                            textAnchor=\"middle\"\n                            dominantBaseline=\"central\"\n                        >\n                            {xAxis.title}\n                        </text>\n                        {debug && (\n                            <rect\n                                width={xAxisTitleBBox.width}\n                                height={xAxisTitleBBox.height}\n                                stroke={BLACK}\n                                fill=\"none\"\n                            />\n                        )}\n                    </g>\n                )}\n                {xAxisVisible && (\n                    <g fontSize=\"14px\" transform={`translate(${xAxisBBox.x},${xAxisBBox.y})`}>\n                        {xKeys.map(key => {\n                            const inclined = labelAngles.xAxisLabels !== 0;\n                            const onBottom = xAxis.position === 'bottom';\n                            const tickY1 = onBottom ? 0 : xAxisBBox.height;\n                            const tickY2 = onBottom ? tickY1 + tickSizeX : tickY1 - tickSizeX;\n                            const textY = onBottom ? tickY2 + TICK_OFFSET : tickY2 - TICK_OFFSET;\n                            const x = scales.x(key) + stepX / 2;\n                            const angle = -labelAngles.xAxisLabels;\n                            const textAnchor = !inclined ? 'middle' : onBottom ? 'end' : 'start';\n                            return (\n                                <g key={key}>\n                                    <line x1={x} x2={x} y1={tickY1} y2={tickY2} stroke={BLACK} />\n                                    <text\n                                        x={x}\n                                        y={textY}\n                                        textAnchor={textAnchor}\n                                        transform={`rotate(${angle},${x},${textY})`}\n                                        dominantBaseline={inclined ? 'central' : onBottom ? 'hanging' :'auto'}\n                                    >\n                                        {xLabels[key]}\n                                    </text>\n                                </g>\n                            );\n                        })}\n                        {debug && <rect width={xAxisBBox.width} height={xAxisBBox.height} stroke={BLACK} fill=\"none\" />}\n                    </g>\n                )}\n            </g>\n            {/* y-axis title, ticks and captions */}\n            <g>\n                {yAxisTitleBBox.isVisible && (\n                    <g\n                        transform={`translate(\n                                ${yAxisTitleBBox.x + yAxisTitleBBox.width / 2},\n                                ${yAxisTitleBBox.y + yAxisTitleBBox.height / 2})`}\n                    >\n                        <text\n                            transform={`rotate(${yAxis.position === 'left' ? -90 : 90})`}\n                            dominantBaseline=\"central\"\n                            textAnchor=\"middle\"\n                        >\n                            {yAxis.title}\n                        </text>\n                    </g>\n                )}\n                {debug && (\n                    <rect\n                        x={yAxisTitleBBox.x}\n                        y={yAxisTitleBBox.y}\n                        width={yAxisTitleBBox.width}\n                        height={yAxisTitleBBox.height}\n                        stroke={BLACK}\n                        fill=\"none\"\n                    />\n                )}\n                {yAxisVisible && (\n                    <g fontSize=\"14px\" transform={`translate(${yAxisBBox.x},${yAxisBBox.y})`}>\n                        {yKeys.map(key => {\n                            const inclined = labelAngles.yAxisLabels !== 0;\n                            const onLeft = yAxis.position === 'left';\n                            const angle = -(90 - labelAngles.yAxisLabels);\n                            const textAnchor = labelAngles.yAxisLabels === 0 ? 'middle' : onLeft ? 'end' : 'start';\n                            const dominantBaseline = inclined ? 'central' : onLeft ? 'auto' : 'hanging';\n                            const tickX1 = onLeft ? yAxisBBox.width : 0;\n                            const tickX2 = onLeft ? tickX1 - tickSizeY : tickX1 + tickSizeY;\n                            const textX = onLeft ? tickX2 - TICK_OFFSET : tickX2 + TICK_OFFSET;\n                            const y = scales.y(key) + stepY / 2;\n                            return (\n                                <g key={key}>\n                                    <line x1={tickX1} x2={tickX2} y1={y} y2={y} stroke={BLACK} />\n                                    <text x={textX} y={y} textAnchor={textAnchor} transform={`rotate(${angle},${textX},${y})`} dominantBaseline={dominantBaseline}>\n                                        {yLabels[key]}\n                                    </text>\n                                </g>\n                            );\n                        })}\n                    </g>\n                )}\n                {debug && (\n                    <rect\n                        x={yAxisBBox.x}\n                        y={yAxisBBox.y}\n                        height={yAxisBBox.height}\n                        width={yAxisBBox.width}\n                        stroke={BLACK}\n                        fill=\"none\"\n                    />\n                )}\n            </g>\n        </g>\n    );\n}\n"],"names":["AxisCaptions","sideElementBBoxes","debug","xKeys","yKeys","scales","xAxis","yAxis","stepX","stepY","labelAngles","xLabels","yLabels","tickSizeX","DEFAULT_TICKS_SIZE","tickSizeY","xAxisVisible","xAxisTitleBBox","xAxisBBox","yAxisVisible","yAxisTitleBBox","yAxisBBox","jsxs","jsx","BLACK","key","inclined","onBottom","tickY1","tickY2","textY","TICK_OFFSET","x","angle","textAnchor","onLeft","dominantBaseline","tickX1","tickX2","textX","y"],"mappings":"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"}
+{"version":3,"file":"AxisCaptions.js","names":[],"sources":["../../../src/bubble/components/AxisCaptions.tsx"],"sourcesContent":["import {BLACK} from '../../constants';\nimport type {ChartScales, ChartSideElementsBBoxes, LabelAngles} from './types';\nimport {DEFAULT_TICKS_SIZE, TICK_OFFSET} from '../constants';\nimport type {BubbleSettingsImpl} from '../BubbleSettingsImpl';\nimport React from 'react';\n\ninterface AxisCaptionsProps {\n    sideElementBBoxes: ChartSideElementsBBoxes;\n    debug: boolean;\n    xKeys: string[];\n    yKeys: string[];\n    scales: ChartScales;\n    xAxis: BubbleSettingsImpl['chartSettings']['xAxis'];\n    yAxis: BubbleSettingsImpl['chartSettings']['yAxis'];\n    stepX: number;\n    stepY: number;\n    labelAngles: LabelAngles;\n    xLabels: Record<string, string>;\n    yLabels: Record<string, string>;\n}\nexport function AxisCaptions({\n    sideElementBBoxes,\n    debug,\n    xKeys,\n    yKeys,\n    scales,\n    xAxis,\n    yAxis,\n    stepX,\n    stepY,\n    labelAngles,\n    xLabels,\n    yLabels\n}: AxisCaptionsProps) {\n    const tickSizeX = xAxis.showTicks ? DEFAULT_TICKS_SIZE : 0;\n    const tickSizeY = yAxis.showTicks ? DEFAULT_TICKS_SIZE : 0;\n\n    const xAxisVisible = sideElementBBoxes.top.axis.isVisible || sideElementBBoxes.bottom.axis.isVisible;\n    const xAxisTitleBBox = sideElementBBoxes.top.axisTitle.isVisible\n        ? sideElementBBoxes.top.axisTitle\n        : sideElementBBoxes.bottom.axisTitle;\n    const xAxisBBox = sideElementBBoxes.top.axis.isVisible ? sideElementBBoxes.top.axis : sideElementBBoxes.bottom.axis;\n\n    const yAxisVisible = sideElementBBoxes.left.axis.isVisible || sideElementBBoxes.right.axis.isVisible;\n    const yAxisTitleBBox = sideElementBBoxes.left.axisTitle.isVisible\n        ? sideElementBBoxes.left.axisTitle\n        : sideElementBBoxes.right.axisTitle;\n    const yAxisBBox = sideElementBBoxes.left.axis.isVisible\n        ? sideElementBBoxes.left.axis\n        : sideElementBBoxes.right.axis;\n    return (\n        <g>\n            {/* x-axis title, ticks and captions */}\n            <g>\n                {xAxisTitleBBox.isVisible && (\n                    <g transform={`translate(${xAxisTitleBBox.x},${xAxisTitleBBox.y})`}>\n                        <text\n                            x={xAxisTitleBBox.width / 2}\n                            y={xAxisTitleBBox.height / 2}\n                            textAnchor=\"middle\"\n                            dominantBaseline=\"central\"\n                        >\n                            {xAxis.title}\n                        </text>\n                        {debug && (\n                            <rect\n                                width={xAxisTitleBBox.width}\n                                height={xAxisTitleBBox.height}\n                                stroke={BLACK}\n                                fill=\"none\"\n                            />\n                        )}\n                    </g>\n                )}\n                {xAxisVisible && (\n                    <g fontSize=\"14px\" transform={`translate(${xAxisBBox.x},${xAxisBBox.y})`}>\n                        {xKeys.map(key => {\n                            const inclined = labelAngles.xAxisLabels !== 0;\n                            const onBottom = xAxis.position === 'bottom';\n                            const tickY1 = onBottom ? 0 : xAxisBBox.height;\n                            const tickY2 = onBottom ? tickY1 + tickSizeX : tickY1 - tickSizeX;\n                            const textY = onBottom ? tickY2 + TICK_OFFSET : tickY2 - TICK_OFFSET;\n                            const x = scales.x(key) + stepX / 2;\n                            const angle = -labelAngles.xAxisLabels;\n                            const textAnchor = !inclined ? 'middle' : onBottom ? 'end' : 'start';\n                            return (\n                                <g key={key}>\n                                    <line x1={x} x2={x} y1={tickY1} y2={tickY2} stroke={BLACK} />\n                                    <text\n                                        x={x}\n                                        y={textY}\n                                        textAnchor={textAnchor}\n                                        transform={`rotate(${angle},${x},${textY})`}\n                                        dominantBaseline={inclined ? 'central' : onBottom ? 'hanging' :'auto'}\n                                    >\n                                        {xLabels[key]}\n                                    </text>\n                                </g>\n                            );\n                        })}\n                        {debug && <rect width={xAxisBBox.width} height={xAxisBBox.height} stroke={BLACK} fill=\"none\" />}\n                    </g>\n                )}\n            </g>\n            {/* y-axis title, ticks and captions */}\n            <g>\n                {yAxisTitleBBox.isVisible && (\n                    <g\n                        transform={`translate(\n                                ${yAxisTitleBBox.x + yAxisTitleBBox.width / 2},\n                                ${yAxisTitleBBox.y + yAxisTitleBBox.height / 2})`}\n                    >\n                        <text\n                            transform={`rotate(${yAxis.position === 'left' ? -90 : 90})`}\n                            dominantBaseline=\"central\"\n                            textAnchor=\"middle\"\n                        >\n                            {yAxis.title}\n                        </text>\n                    </g>\n                )}\n                {debug && (\n                    <rect\n                        x={yAxisTitleBBox.x}\n                        y={yAxisTitleBBox.y}\n                        width={yAxisTitleBBox.width}\n                        height={yAxisTitleBBox.height}\n                        stroke={BLACK}\n                        fill=\"none\"\n                    />\n                )}\n                {yAxisVisible && (\n                    <g fontSize=\"14px\" transform={`translate(${yAxisBBox.x},${yAxisBBox.y})`}>\n                        {yKeys.map(key => {\n                            const inclined = labelAngles.yAxisLabels !== 0;\n                            const onLeft = yAxis.position === 'left';\n                            const angle = -(90 - labelAngles.yAxisLabels);\n                            const textAnchor = labelAngles.yAxisLabels === 0 ? 'middle' : onLeft ? 'end' : 'start';\n                            const dominantBaseline = inclined ? 'central' : onLeft ? 'auto' : 'hanging';\n                            const tickX1 = onLeft ? yAxisBBox.width : 0;\n                            const tickX2 = onLeft ? tickX1 - tickSizeY : tickX1 + tickSizeY;\n                            const textX = onLeft ? tickX2 - TICK_OFFSET : tickX2 + TICK_OFFSET;\n                            const y = scales.y(key) + stepY / 2;\n                            return (\n                                <g key={key}>\n                                    <line x1={tickX1} x2={tickX2} y1={y} y2={y} stroke={BLACK} />\n                                    <text x={textX} y={y} textAnchor={textAnchor} transform={`rotate(${angle},${textX},${y})`} dominantBaseline={dominantBaseline}>\n                                        {yLabels[key]}\n                                    </text>\n                                </g>\n                            );\n                        })}\n                    </g>\n                )}\n                {debug && (\n                    <rect\n                        x={yAxisBBox.x}\n                        y={yAxisBBox.y}\n                        height={yAxisBBox.height}\n                        width={yAxisBBox.width}\n                        stroke={BLACK}\n                        fill=\"none\"\n                    />\n                )}\n            </g>\n        </g>\n    );\n}\n"],"mappings":"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"}