@milaboratories/miplots4 1.0.153 → 1.0.154

package/dist/scatterplot-umap/components/LowerSVG.js

@@ -80,9 +80,9 @@ function ot({
               title: m,
               show: w.show,
               position: w.position,
-              leftPadding: e.left,
+              leftPadding: -e.left,
               rightPadding: e.right,
-              chartsWidth: t.chartWidth
+              chartsWidth: t.totalWidth
             }
           ),
           /* @__PURE__ */ o.jsxs("g", { dominantBaseline: "central", textAnchor: "middle", fontWeight: "500", fontSize: "14px", fill: q, children: [

package/dist/scatterplot-umap/components/LowerSVG.js.map

@@ -1 +1 @@
-{"version":3,"file":"LowerSVG.js","sources":["../../../src/scatterplot-umap/components/LowerSVG.tsx"],"sourcesContent":["import {format} from 'd3-format';\nimport { curveBasis, line } from 'd3-shape';\nimport React, { useEffect, useState } from 'react';\nimport { ChartsTitle } from '../../common/ChartsTitle';\nimport { ContinuousGrid } from '../../common/ContinuousGrid';\nimport fonts from '../../common/fonts';\nimport { Legend } from '../../common/Legend';\nimport type { TooltipsData } from '../../common/Tooltip';\nimport { Tooltip } from '../../common/Tooltip';\nimport type { LegendData } from '../../common/types';\nimport { useDataFrame } from '../../common/useDataFrame';\nimport { BLACK } from '../../constants';\nimport type { DataFrame } from '../../DataFrame';\nimport { ContinuousAxis } from '../../common/ContinuousAxis';\nimport {formatColumnValue} from '../../scatterplot/utils/formatColumnValue';\nimport type { ColumnName } from '../../types';\nimport type { CurveUmapLayer } from '../../types/scatterplot-umap';\nimport { DEFAULT_TICKS_SIZE, LEGEND_OFFSET, TITLE_LINE } from '../constants';\nimport type { ScatterplotUmapSettingsImpl } from '../SettingsImpl';\nimport type { CaptionsSizes, ChartScales, ChartSizes, Dot, DotInfo, Margins, SVGLayerProps } from '../types';\n\nfunction getTooltipContent(dataFrame: DataFrame, dot: DotInfo, columnsList: ColumnName[] = [], ) {\n    const lines: string[] = [];\n    for (const column of columnsList) {\n        const columnFormatter = column?.format ? format(column.format) : undefined;\n        lines.push(`${column.label}: ${formatColumnValue(dataFrame, dot.idx, column, columnFormatter)}`);\n    }\n    return lines;\n}\n\nfunction getTitle(title: string | ColumnName): string {\n    if (typeof title === 'string') {\n        return title;\n    }\n    return title.label ?? title.value;\n}\n\nconst lineGenerator = line<Dot>().curve(curveBasis);\n\nfunction LowerSvg({\n    scales,\n    chartSettings,\n    mainTitle,\n    keyColumn,\n    margins,\n    chartSizes,\n    container,\n    zoomStateKey,\n    legendData,\n    dotsByGrouping,\n    layers,\n    aesGetters,\n    tooltipData\n}: {\n    aesGetters: SVGLayerProps['aesGetters'];\n    scales: ChartScales;\n    chartSettings: ScatterplotUmapSettingsImpl['chartSettings'];\n    mainTitle: string[];\n    keyColumn: ColumnName | null;\n    margins: Margins;\n    chartSizes: ChartSizes;\n    captionsSizes: CaptionsSizes;\n    selectedDot?: DotInfo | null;\n    container: SVGElement | null;\n    zoomStateKey: string;\n    legendData: LegendData;\n    dotsByGrouping: Record<string, Dot[]>;\n    layers: ScatterplotUmapSettingsImpl['layers'];\n    tooltipData: TooltipsData<DotInfo>;\n}) {\n    const dataFrame = useDataFrame();\n    const {title, xAxis, yAxis, frame, legend} = chartSettings;\n    const tickSizeX = xAxis.showTicks ? DEFAULT_TICKS_SIZE : 0;\n    const tickSizeY = yAxis.showTicks ? DEFAULT_TICKS_SIZE : 0;\n    const xTitle = xAxis.title;\n    const yTitle = yAxis.title;\n    const needLeftAxis = true;\n    const needBottomAxis = true;\n\n    const sideDistances = {\n        left: 0,\n        right: chartSizes.chartWidth,\n        top: 0,\n        bottom: chartSizes.chartHeight,\n    };\n\n    if (!container) {\n        return null;\n    }\n\n    const curveLayer = layers.find(layer => layer.type === 'curve') as CurveUmapLayer | undefined;\n    const [lines, setLines] = useState<{key: string, d:string, dot: Dot}[]>([]);\n\n    function updateLines() {\n        const data = Object.entries(dotsByGrouping);\n        const nextLines = data.map(([key, dots]) => ({\n            key,\n            d: curveLayer?.smoothing ? lineGenerator(dots) ?? '' : dots.map(d => `${scales.x(d.x)},${scales.y(d.y)}`).join(' '),\n            dot: dots[0]\n        }));\n        setLines(nextLines);\n    }\n    useEffect(() => {\n        if (!curveLayer) {\n            return;\n        }\n        lineGenerator\n            .x((d: Dot) => scales.x(d.x))\n            .y((d: Dot) => scales.y(d.y));\n        updateLines();\n    }, [zoomStateKey, chartSizes.chartWidth, chartSizes.chartHeight]);\n\n    useEffect(() => {\n        if (!curveLayer) {\n            return;\n        }\n        updateLines();\n    }, [curveLayer?.smoothing]);\n\n    return (\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox={`0 0 ${chartSizes.totalWidth} ${chartSizes.totalHeight}`}\n            width={chartSizes.totalWidth}\n            height={chartSizes.totalHeight}\n            style={{pointerEvents: 'none'}}\n        >\n            <defs>{fonts}</defs>\n            <g transform={`translate(${margins.left},${margins.top})`} fontFamily=\"Manrope\">\n                <clipPath id=\"viewportClipPath\">\n                    <rect x=\"0\" y=\"0\" width={chartSizes.chartWidth} height={chartSizes.chartHeight}/>\n                </clipPath>\n                <ChartsTitle\n                    title={mainTitle}\n                    show={title.show}\n                    position={title.position}\n                    leftPadding={margins.left}\n                    rightPadding={margins.right}\n                    chartsWidth={chartSizes.chartWidth}\n                />\n                <g dominantBaseline=\"central\" textAnchor=\"middle\" fontWeight=\"500\" fontSize=\"14px\" fill={BLACK}>\n                    {xTitle && (\n                        <text\n                            x={chartSizes.chartWidth / 2}\n                            y={chartSizes.chartHeight + margins.bottom - TITLE_LINE / 2}\n                        >\n                            {getTitle(xTitle)}\n                        </text>\n                    )}\n                    {yTitle && (\n                        <text\n                            x={-margins.left + TITLE_LINE / 2}\n                            y={chartSizes.chartHeight / 2}\n                            transform={`rotate(-90,${-margins.left + TITLE_LINE / 2},${\n                                chartSizes.chartHeight / 2\n                            })`}\n                        >\n                            {getTitle(yTitle)}\n                        </text>\n                    )}\n                </g>\n                <ContinuousGrid\n                    width={chartSizes.chartWidth}\n                    height={chartSizes.chartHeight}\n                    scaleX={scales.x}\n                    scaleY={scales.y}\n                    axisX={xAxis}\n                    axisY={yAxis}\n                    updatingKey={zoomStateKey}\n                    frameType={frame.type}\n                />\n                {needBottomAxis && (\n                    <g transform={`translate(0,${chartSizes.chartHeight})`}>\n                        <ContinuousAxis scale={scales.x} orient=\"bottom\" tickSize={tickSizeX} />\n                    </g>\n                )}\n                {needLeftAxis && (\n                    <g>\n                        <ContinuousAxis scale={scales.y} orient=\"left\" tickSize={tickSizeY} />\n                    </g>\n                )}\n                {curveLayer && curveLayer.smoothing && (\n                    <g clipPath=\"url(#viewportClipPath)\">\n                        {lines.map(({key, d, dot}) => (\n                            <path\n                                key={key}\n                                d={d}\n                                fill=\"none\"\n                                stroke={aesGetters.dotFill(dot.idx)}\n                                strokeWidth={curveLayer.aes?.lineWidth}\n                                strokeDasharray={aesGetters.lineType(dot.idx)}\n                            />\n                        ))}\n                    </g>\n                )}\n                {curveLayer && !curveLayer.smoothing && (\n                    <g clipPath=\"url(#viewportClipPath)\">\n                        {lines.map(({key, d, dot}) => (\n                            <polyline\n                                key={key}\n                                points={d}\n                                fill=\"none\"\n                                stroke={aesGetters.dotFill(dot.idx)}\n                                strokeWidth={curveLayer.aes?.lineWidth}\n                                strokeDasharray={aesGetters.lineType(dot.idx)}\n                            />\n                        ))}\n                    </g>\n                )}\n                {chartSettings.tooltips.show && tooltipData.selectedData && (\n                    <Tooltip\n                        content={getTooltipContent(dataFrame, tooltipData.selectedData, chartSettings.tooltips?.content)}\n                        x={scales.x(tooltipData.selectedData.x)}\n                        y={scales.y(tooltipData.selectedData.y)}\n                        active={true}\n                        fixed={tooltipData.fixed}\n                        sideDistances={sideDistances}\n                        container={container}\n                        onClose={tooltipData.onClose}\n                    />\n                )}\n                {legend.show && (\n                    <g transform={`translate(${chartSizes.chartWidth + LEGEND_OFFSET},0)`}>\n                        <Legend legendData={legendData} />\n                    </g>\n                )}\n            </g>\n        </svg>\n    );\n}\n\nexport default React.memo(LowerSvg);\n"],"names":["getTooltipContent","dataFrame","dot","columnsList","lines","column","columnFormatter","format","formatColumnValue","getTitle","title","lineGenerator","line","curveBasis","LowerSvg","scales","chartSettings","mainTitle","keyColumn","margins","chartSizes","container","zoomStateKey","legendData","dotsByGrouping","layers","aesGetters","tooltipData","useDataFrame","xAxis","yAxis","frame","legend","tickSizeX","DEFAULT_TICKS_SIZE","tickSizeY","xTitle","yTitle","sideDistances","curveLayer","layer","setLines","useState","updateLines","nextLines","key","dots","d","useEffect","jsxs","jsx","fonts","ChartsTitle","BLACK","TITLE_LINE","ContinuousGrid","ContinuousAxis","_a","Tooltip","LEGEND_OFFSET","Legend","LowerSvg$1","React"],"mappings":"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"}
+{"version":3,"file":"LowerSVG.js","sources":["../../../src/scatterplot-umap/components/LowerSVG.tsx"],"sourcesContent":["import {format} from 'd3-format';\nimport { curveBasis, line } from 'd3-shape';\nimport React, { useEffect, useState } from 'react';\nimport { ChartsTitle } from '../../common/ChartsTitle';\nimport { ContinuousGrid } from '../../common/ContinuousGrid';\nimport fonts from '../../common/fonts';\nimport { Legend } from '../../common/Legend';\nimport type { TooltipsData } from '../../common/Tooltip';\nimport { Tooltip } from '../../common/Tooltip';\nimport type { LegendData } from '../../common/types';\nimport { useDataFrame } from '../../common/useDataFrame';\nimport { BLACK } from '../../constants';\nimport type { DataFrame } from '../../DataFrame';\nimport { ContinuousAxis } from '../../common/ContinuousAxis';\nimport {formatColumnValue} from '../../scatterplot/utils/formatColumnValue';\nimport type { ColumnName } from '../../types';\nimport type { CurveUmapLayer } from '../../types/scatterplot-umap';\nimport { DEFAULT_TICKS_SIZE, LEGEND_OFFSET, TITLE_LINE } from '../constants';\nimport type { ScatterplotUmapSettingsImpl } from '../SettingsImpl';\nimport type { CaptionsSizes, ChartScales, ChartSizes, Dot, DotInfo, Margins, SVGLayerProps } from '../types';\n\nfunction getTooltipContent(dataFrame: DataFrame, dot: DotInfo, columnsList: ColumnName[] = [], ) {\n    const lines: string[] = [];\n    for (const column of columnsList) {\n        const columnFormatter = column?.format ? format(column.format) : undefined;\n        lines.push(`${column.label}: ${formatColumnValue(dataFrame, dot.idx, column, columnFormatter)}`);\n    }\n    return lines;\n}\n\nfunction getTitle(title: string | ColumnName): string {\n    if (typeof title === 'string') {\n        return title;\n    }\n    return title.label ?? title.value;\n}\n\nconst lineGenerator = line<Dot>().curve(curveBasis);\n\nfunction LowerSvg({\n    scales,\n    chartSettings,\n    mainTitle,\n    keyColumn,\n    margins,\n    chartSizes,\n    container,\n    zoomStateKey,\n    legendData,\n    dotsByGrouping,\n    layers,\n    aesGetters,\n    tooltipData\n}: {\n    aesGetters: SVGLayerProps['aesGetters'];\n    scales: ChartScales;\n    chartSettings: ScatterplotUmapSettingsImpl['chartSettings'];\n    mainTitle: string[];\n    keyColumn: ColumnName | null;\n    margins: Margins;\n    chartSizes: ChartSizes;\n    captionsSizes: CaptionsSizes;\n    selectedDot?: DotInfo | null;\n    container: SVGElement | null;\n    zoomStateKey: string;\n    legendData: LegendData;\n    dotsByGrouping: Record<string, Dot[]>;\n    layers: ScatterplotUmapSettingsImpl['layers'];\n    tooltipData: TooltipsData<DotInfo>;\n}) {\n    const dataFrame = useDataFrame();\n    const {title, xAxis, yAxis, frame, legend} = chartSettings;\n    const tickSizeX = xAxis.showTicks ? DEFAULT_TICKS_SIZE : 0;\n    const tickSizeY = yAxis.showTicks ? DEFAULT_TICKS_SIZE : 0;\n    const xTitle = xAxis.title;\n    const yTitle = yAxis.title;\n    const needLeftAxis = true;\n    const needBottomAxis = true;\n\n    const sideDistances = {\n        left: 0,\n        right: chartSizes.chartWidth,\n        top: 0,\n        bottom: chartSizes.chartHeight,\n    };\n\n    if (!container) {\n        return null;\n    }\n\n    const curveLayer = layers.find(layer => layer.type === 'curve') as CurveUmapLayer | undefined;\n    const [lines, setLines] = useState<{key: string, d:string, dot: Dot}[]>([]);\n\n    function updateLines() {\n        const data = Object.entries(dotsByGrouping);\n        const nextLines = data.map(([key, dots]) => ({\n            key,\n            d: curveLayer?.smoothing ? lineGenerator(dots) ?? '' : dots.map(d => `${scales.x(d.x)},${scales.y(d.y)}`).join(' '),\n            dot: dots[0]\n        }));\n        setLines(nextLines);\n    }\n    useEffect(() => {\n        if (!curveLayer) {\n            return;\n        }\n        lineGenerator\n            .x((d: Dot) => scales.x(d.x))\n            .y((d: Dot) => scales.y(d.y));\n        updateLines();\n    }, [zoomStateKey, chartSizes.chartWidth, chartSizes.chartHeight]);\n\n    useEffect(() => {\n        if (!curveLayer) {\n            return;\n        }\n        updateLines();\n    }, [curveLayer?.smoothing]);\n\n    return (\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox={`0 0 ${chartSizes.totalWidth} ${chartSizes.totalHeight}`}\n            width={chartSizes.totalWidth}\n            height={chartSizes.totalHeight}\n            style={{pointerEvents: 'none'}}\n        >\n            <defs>{fonts}</defs>\n            <g transform={`translate(${margins.left},${margins.top})`} fontFamily=\"Manrope\">\n                <clipPath id=\"viewportClipPath\">\n                    <rect x=\"0\" y=\"0\" width={chartSizes.chartWidth} height={chartSizes.chartHeight}/>\n                </clipPath>\n                <ChartsTitle\n                    title={mainTitle}\n                    show={title.show}\n                    position={title.position}\n                    leftPadding={-margins.left}\n                    rightPadding={margins.right}\n                    chartsWidth={chartSizes.totalWidth}\n                />\n                <g dominantBaseline=\"central\" textAnchor=\"middle\" fontWeight=\"500\" fontSize=\"14px\" fill={BLACK}>\n                    {xTitle && (\n                        <text\n                            x={chartSizes.chartWidth / 2}\n                            y={chartSizes.chartHeight + margins.bottom - TITLE_LINE / 2}\n                        >\n                            {getTitle(xTitle)}\n                        </text>\n                    )}\n                    {yTitle && (\n                        <text\n                            x={-margins.left + TITLE_LINE / 2}\n                            y={chartSizes.chartHeight / 2}\n                            transform={`rotate(-90,${-margins.left + TITLE_LINE / 2},${\n                                chartSizes.chartHeight / 2\n                            })`}\n                        >\n                            {getTitle(yTitle)}\n                        </text>\n                    )}\n                </g>\n                <ContinuousGrid\n                    width={chartSizes.chartWidth}\n                    height={chartSizes.chartHeight}\n                    scaleX={scales.x}\n                    scaleY={scales.y}\n                    axisX={xAxis}\n                    axisY={yAxis}\n                    updatingKey={zoomStateKey}\n                    frameType={frame.type}\n                />\n                {needBottomAxis && (\n                    <g transform={`translate(0,${chartSizes.chartHeight})`}>\n                        <ContinuousAxis scale={scales.x} orient=\"bottom\" tickSize={tickSizeX} />\n                    </g>\n                )}\n                {needLeftAxis && (\n                    <g>\n                        <ContinuousAxis scale={scales.y} orient=\"left\" tickSize={tickSizeY} />\n                    </g>\n                )}\n                {curveLayer && curveLayer.smoothing && (\n                    <g clipPath=\"url(#viewportClipPath)\">\n                        {lines.map(({key, d, dot}) => (\n                            <path\n                                key={key}\n                                d={d}\n                                fill=\"none\"\n                                stroke={aesGetters.dotFill(dot.idx)}\n                                strokeWidth={curveLayer.aes?.lineWidth}\n                                strokeDasharray={aesGetters.lineType(dot.idx)}\n                            />\n                        ))}\n                    </g>\n                )}\n                {curveLayer && !curveLayer.smoothing && (\n                    <g clipPath=\"url(#viewportClipPath)\">\n                        {lines.map(({key, d, dot}) => (\n                            <polyline\n                                key={key}\n                                points={d}\n                                fill=\"none\"\n                                stroke={aesGetters.dotFill(dot.idx)}\n                                strokeWidth={curveLayer.aes?.lineWidth}\n                                strokeDasharray={aesGetters.lineType(dot.idx)}\n                            />\n                        ))}\n                    </g>\n                )}\n                {chartSettings.tooltips.show && tooltipData.selectedData && (\n                    <Tooltip\n                        content={getTooltipContent(dataFrame, tooltipData.selectedData, chartSettings.tooltips?.content)}\n                        x={scales.x(tooltipData.selectedData.x)}\n                        y={scales.y(tooltipData.selectedData.y)}\n                        active={true}\n                        fixed={tooltipData.fixed}\n                        sideDistances={sideDistances}\n                        container={container}\n                        onClose={tooltipData.onClose}\n                    />\n                )}\n                {legend.show && (\n                    <g transform={`translate(${chartSizes.chartWidth + LEGEND_OFFSET},0)`}>\n                        <Legend legendData={legendData} />\n                    </g>\n                )}\n            </g>\n        </svg>\n    );\n}\n\nexport default React.memo(LowerSvg);\n"],"names":["getTooltipContent","dataFrame","dot","columnsList","lines","column","columnFormatter","format","formatColumnValue","getTitle","title","lineGenerator","line","curveBasis","LowerSvg","scales","chartSettings","mainTitle","keyColumn","margins","chartSizes","container","zoomStateKey","legendData","dotsByGrouping","layers","aesGetters","tooltipData","useDataFrame","xAxis","yAxis","frame","legend","tickSizeX","DEFAULT_TICKS_SIZE","tickSizeY","xTitle","yTitle","sideDistances","curveLayer","layer","setLines","useState","updateLines","nextLines","key","dots","d","useEffect","jsxs","jsx","fonts","ChartsTitle","BLACK","TITLE_LINE","ContinuousGrid","ContinuousAxis","_a","Tooltip","LEGEND_OFFSET","Legend","LowerSvg$1","React"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@milaboratories/miplots4",
-    "version": "1.0.153",
+    "version": "1.0.154",
     "description": "Data visualization library",
     "author": "erohinaelena",
     "license": "ISC",