npm - @milaboratories/uikit - Versions diffs - 2.15.37 → 2.15.38 - Mend

@milaboratories/uikit 2.15.37 → 2.15.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (457) hide show

package/dist/components/PlChartHistogram/createGridlines.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"createGridlines.js","names":[],"sources":["../../../src/components/PlChartHistogram/createGridlines.ts"],"sourcesContent":["import type { ChartOptions, Scales } from \"./types\";\nimport type { Selection } from \"d3-selection\";\nimport type { Axis } from \"d3-axis\";\nimport type { NumberValue } from \"d3-scale\";\nimport { selectAll } from \"d3-selection\";\nimport { axisBottom, axisLeft } from \"d3-axis\";\n\nexport function createGridlines(\n svg: Selection<SVGGElement, unknown, null, undefined>,\n options: ChartOptions,\n scales: Scales,\n xTicks: (d: Axis<NumberValue>) => Axis<NumberValue>,\n) {\n const { width, height } = options;\n\n function makeYGridlines() {\n return axisLeft(scales.y) // Use the y-scale for horizontal gridlines\n .ticks(6); // Adjust the number of gridlines\n }\n\n function makeXGridlines() {\n return xTicks(axisBottom(scales.x));\n }\n // Append horizontal gridlines\n svg\n .append(\"g\")\n .attr(\"class\", \"grid\") // Add a class for styling\n .attr(\"font-family\", \"'Manrope', sans-serif\") // Doesn't work\n .call(\n makeYGridlines()\n .tickSize(-width) // Extend gridlines across the chart width\n .tickFormat(() => \"\"),\n ); // Remove tick labels\n\n // Append vertical gridlines\n svg\n .append(\"g\")\n .attr(\"class\", \"grid\") // Add a class for styling\n .attr(\"font-family\", \"'Manrope', sans-serif\")\n .attr(\"transform\", `translate(0,${height})`) // Position at the bottom of the chart\n .call(\n makeXGridlines()\n .tickSize(-height) // Extend gridlines across the chart height\n .tickFormat(() => \"\"),\n ); // Remove tick labels\n\n // Style the gridlines using CSS (or inline styles)\n selectAll(\".grid line\")\n .style(\"stroke\", \"#E1E3EB\") // Light gray gridlines\n // .style('stroke-dasharray', '2,2') // Dashed gridlines\n .style(\"opacity\", 0.7); // Slightly transparent\n}\n"],"mappings":";;;AAOA,SAAgB,EACd,GACA,GACA,GACA,GACA;CACA,IAAM,EAAE,UAAO,cAAW;CAE1B,SAAS,IAAiB;AACxB,SAAO,EAAS,EAAO,EAAE,CACtB,MAAM,EAAE;;CAGb,SAAS,IAAiB;AACxB,SAAO,EAAO,EAAW,EAAO,EAAE,CAAC;;~~AA0BrC~~,~~CAvBA~~,EACG,OAAO,IAAI,CACX,KAAK,SAAS,OAAO,CACrB,KAAK,eAAe,wBAAwB,CAC5C,KACC,GAAgB,CACb,SAAS,CAAC,EAAM,CAChB,iBAAiB,GAAG,CACxB,EAGH,EACG,OAAO,IAAI,CACX,KAAK,SAAS,OAAO,CACrB,KAAK,eAAe,wBAAwB,CAC5C,KAAK,aAAa,eAAe,EAAO,GAAG,CAC3C,KACC,GAAgB,CACb,SAAS,CAAC,EAAO,CACjB,iBAAiB,GAAG,CACxB,EAGH,EAAU,aAAa,CACpB,MAAM,UAAU,UAAU,CAE1B,MAAM,WAAW,GAAI"}
1	+ {"version":3,"file":"createGridlines.js","names":[],"sources":["../../../src/components/PlChartHistogram/createGridlines.ts"],"sourcesContent":["import type { ChartOptions, Scales } from \"./types\";\nimport type { Selection } from \"d3-selection\";\nimport type { Axis } from \"d3-axis\";\nimport type { NumberValue } from \"d3-scale\";\nimport { selectAll } from \"d3-selection\";\nimport { axisBottom, axisLeft } from \"d3-axis\";\n\nexport function createGridlines(\n svg: Selection<SVGGElement, unknown, null, undefined>,\n options: ChartOptions,\n scales: Scales,\n xTicks: (d: Axis<NumberValue>) => Axis<NumberValue>,\n) {\n const { width, height } = options;\n\n function makeYGridlines() {\n return axisLeft(scales.y) // Use the y-scale for horizontal gridlines\n .ticks(6); // Adjust the number of gridlines\n }\n\n function makeXGridlines() {\n return xTicks(axisBottom(scales.x));\n }\n // Append horizontal gridlines\n svg\n .append(\"g\")\n .attr(\"class\", \"grid\") // Add a class for styling\n .attr(\"data-testid\", \"pl-chart-histogram-grid\")\n .attr(\"font-family\", \"'Manrope', sans-serif\") // Doesn't work\n .call(\n makeYGridlines()\n .tickSize(-width) // Extend gridlines across the chart width\n .tickFormat(() => \"\"),\n ); // Remove tick labels\n\n // Append vertical gridlines\n svg\n .append(\"g\")\n .attr(\"class\", \"grid\") // Add a class for styling\n .attr(\"data-testid\", \"pl-chart-histogram-grid\")\n .attr(\"font-family\", \"'Manrope', sans-serif\")\n .attr(\"transform\", `translate(0,${height})`) // Position at the bottom of the chart\n .call(\n makeXGridlines()\n .tickSize(-height) // Extend gridlines across the chart height\n .tickFormat(() => \"\"),\n ); // Remove tick labels\n\n // Style the gridlines using CSS (or inline styles)\n selectAll(\".grid line\")\n .style(\"stroke\", \"#E1E3EB\") // Light gray gridlines\n // .style('stroke-dasharray', '2,2') // Dashed gridlines\n .style(\"opacity\", 0.7); // Slightly transparent\n}\n"],"mappings":";;;AAOA,SAAgB,EACd,GACA,GACA,GACA,GACA;CACA,IAAM,EAAE,UAAO,cAAW;CAE1B,SAAS,IAAiB;AACxB,SAAO,EAAS,EAAO,EAAE,CACtB,MAAM,EAAE;;CAGb,SAAS,IAAiB;AACxB,SAAO,EAAO,EAAW,EAAO,EAAE,CAAC;;AA4BrC,CAzBA,EACG,OAAO,IAAI,CACX,KAAK,SAAS,OAAO,CACrB,KAAK,eAAe,0BAA0B,CAC9C,KAAK,eAAe,wBAAwB,CAC5C,KACC,GAAgB,CACb,SAAS,CAAC,EAAM,CAChB,iBAAiB,GAAG,CACxB,EAGH,EACG,OAAO,IAAI,CACX,KAAK,SAAS,OAAO,CACrB,KAAK,eAAe,0BAA0B,CAC9C,KAAK,eAAe,wBAAwB,CAC5C,KAAK,aAAa,eAAe,EAAO,GAAG,CAC3C,KACC,GAAgB,CACb,SAAS,CAAC,EAAO,CACjB,iBAAiB,GAAG,CACxB,EAGH,EAAU,aAAa,CACpB,MAAM,UAAU,UAAU,CAE1B,MAAM,WAAW,GAAI"}

package/dist/components/PlChartHistogram/createLabels.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"createLabels.d.ts","sourceRoot":"","sources":["../../../src/components/PlChartHistogram/createLabels.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,wBAAgB,YAAY,CAC1B,GAAG,EAAE,SAAS,CAAC,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,CAAC,EACrD,OAAO,EAAE,YAAY,~~QA4BtB~~"}
1	+ {"version":3,"file":"createLabels.d.ts","sourceRoot":"","sources":["../../../src/components/PlChartHistogram/createLabels.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,wBAAgB,YAAY,CAC1B,GAAG,EAAE,SAAS,CAAC,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,CAAC,EACrD,OAAO,EAAE,YAAY,QA8BtB"}

package/dist/components/PlChartHistogram/createLabels.js CHANGED Viewed

@@ -1,7 +1,7 @@
 //#region src/components/PlChartHistogram/createLabels.ts
 function e(e, t) {
 	let { height: n, width: r, margin: i, xAxisLabel: a, yAxisLabel: o, compact: s } = t;
-	s || (e.append("text").attr("class", "x-axis-label").attr("font-weight", 500).attr("text-anchor", "middle").attr("x", r / 2).attr("y", n + i.bottom - 5).text(a ?? "Value Range"), e.append("text").attr("class", "y-axis-label").attr("font-weight", 500).attr("text-anchor", "middle").attr("x", -n / 2).attr("y", -i.left + 15).attr("transform", "rotate(-90)").text(o ?? "Frequency"));
+	s || (e.append("text").attr("class", "x-axis-label").attr("data-testid", "pl-chart-histogram-x-axis-label").attr("font-weight", 500).attr("text-anchor", "middle").attr("x", r / 2).attr("y", n + i.bottom - 5).text(a ?? "Value Range"), e.append("text").attr("class", "y-axis-label").attr("data-testid", "pl-chart-histogram-y-axis-label").attr("font-weight", 500).attr("text-anchor", "middle").attr("x", -n / 2).attr("y", -i.left + 15).attr("transform", "rotate(-90)").text(o ?? "Frequency"));
 }
 //#endregion
 export { e as createLabels };

package/dist/components/PlChartHistogram/createLabels.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"createLabels.js","names":[],"sources":["../../../src/components/PlChartHistogram/createLabels.ts"],"sourcesContent":["import type { Selection } from \"d3-selection\";\nimport type { ChartOptions } from \"./types\";\n\nexport function createLabels(\n svg: Selection<SVGGElement, unknown, null, undefined>,\n options: ChartOptions,\n) {\n const { height, width, margin, xAxisLabel, yAxisLabel, compact } = options;\n\n if (compact) {\n return;\n }\n\n // X-axis label\n svg\n .append(\"text\")\n .attr(\"class\", \"x-axis-label\")\n .attr(\"font-weight\", 500)\n .attr(\"text-anchor\", \"middle\") // Center the text\n .attr(\"x\", width / 2) // Center horizontally\n .attr(\"y\", height + margin.bottom - 5) // Position below the X-axis\n .text(xAxisLabel ?? \"Value Range\"); // Set your custom label text\n\n // Y-axis label\n svg\n .append(\"text\")\n .attr(\"class\", \"y-axis-label\")\n .attr(\"font-weight\", 500)\n .attr(\"text-anchor\", \"middle\") // Center the text\n .attr(\"x\", -height / 2) // Center vertically (rotated axis)\n .attr(\"y\", -margin.left + 15) // Position to the left of the Y-axis\n .attr(\"transform\", \"rotate(-90)\") // Rotate text 90 degrees counter-clockwise\n .text(yAxisLabel ?? \"Frequency\"); // Set your custom label text\n}\n"],"mappings":";AAGA,SAAgB,EACd,GACA,GACA;CACA,IAAM,EAAE,WAAQ,UAAO,WAAQ,eAAY,eAAY,eAAY;AAE/D,OAKJ,EACG,OAAO,OAAO,CACd,KAAK,SAAS,eAAe,CAC7B,KAAK,eAAe,IAAI,CACxB,KAAK,eAAe,SAAS,CAC7B,KAAK,KAAK,IAAQ,EAAE,CACpB,KAAK,KAAK,IAAS,EAAO,SAAS,EAAE,CACrC,KAAK,KAAc,cAAc,EAGpC,EACG,OAAO,OAAO,CACd,KAAK,SAAS,eAAe,CAC7B,KAAK,eAAe,IAAI,CACxB,KAAK,eAAe,SAAS,CAC7B,KAAK,KAAK,CAAC,IAAS,EAAE,CACtB,KAAK,KAAK,CAAC,EAAO,OAAO,GAAG,CAC5B,KAAK,aAAa,cAAc,CAChC,KAAK,KAAc,YAAY"}
1	+ {"version":3,"file":"createLabels.js","names":[],"sources":["../../../src/components/PlChartHistogram/createLabels.ts"],"sourcesContent":["import type { Selection } from \"d3-selection\";\nimport type { ChartOptions } from \"./types\";\n\nexport function createLabels(\n svg: Selection<SVGGElement, unknown, null, undefined>,\n options: ChartOptions,\n) {\n const { height, width, margin, xAxisLabel, yAxisLabel, compact } = options;\n\n if (compact) {\n return;\n }\n\n // X-axis label\n svg\n .append(\"text\")\n .attr(\"class\", \"x-axis-label\")\n .attr(\"data-testid\", \"pl-chart-histogram-x-axis-label\")\n .attr(\"font-weight\", 500)\n .attr(\"text-anchor\", \"middle\") // Center the text\n .attr(\"x\", width / 2) // Center horizontally\n .attr(\"y\", height + margin.bottom - 5) // Position below the X-axis\n .text(xAxisLabel ?? \"Value Range\"); // Set your custom label text\n\n // Y-axis label\n svg\n .append(\"text\")\n .attr(\"class\", \"y-axis-label\")\n .attr(\"data-testid\", \"pl-chart-histogram-y-axis-label\")\n .attr(\"font-weight\", 500)\n .attr(\"text-anchor\", \"middle\") // Center the text\n .attr(\"x\", -height / 2) // Center vertically (rotated axis)\n .attr(\"y\", -margin.left + 15) // Position to the left of the Y-axis\n .attr(\"transform\", \"rotate(-90)\") // Rotate text 90 degrees counter-clockwise\n .text(yAxisLabel ?? \"Frequency\"); // Set your custom label text\n}\n"],"mappings":";AAGA,SAAgB,EACd,GACA,GACA;CACA,IAAM,EAAE,WAAQ,UAAO,WAAQ,eAAY,eAAY,eAAY;AAE/D,OAKJ,EACG,OAAO,OAAO,CACd,KAAK,SAAS,eAAe,CAC7B,KAAK,eAAe,kCAAkC,CACtD,KAAK,eAAe,IAAI,CACxB,KAAK,eAAe,SAAS,CAC7B,KAAK,KAAK,IAAQ,EAAE,CACpB,KAAK,KAAK,IAAS,EAAO,SAAS,EAAE,CACrC,KAAK,KAAc,cAAc,EAGpC,EACG,OAAO,OAAO,CACd,KAAK,SAAS,eAAe,CAC7B,KAAK,eAAe,kCAAkC,CACtD,KAAK,eAAe,IAAI,CACxB,KAAK,eAAe,SAAS,CAC7B,KAAK,KAAK,CAAC,IAAS,EAAE,CACtB,KAAK,KAAK,CAAC,EAAO,OAAO,GAAG,CAC5B,KAAK,aAAa,cAAc,CAChC,KAAK,KAAc,YAAY"}

package/dist/components/PlChartHistogram/createSvgContainer.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"createSvgContainer.d.ts","sourceRoot":"","sources":["../../../src/components/PlChartHistogram/createSvgContainer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAG5C,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,YAAY,~~2EAkBxE~~"}
1	+ {"version":3,"file":"createSvgContainer.d.ts","sourceRoot":"","sources":["../../../src/components/PlChartHistogram/createSvgContainer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAG5C,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,YAAY,2EAoBxE"}

package/dist/components/PlChartHistogram/createSvgContainer.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { select as e } from "d3-selection";
 //#region src/components/PlChartHistogram/createSvgContainer.ts
 function t(t, n) {
 	let { width: r, height: i, margin: a, compact: o } = n;
-	return t.replaceChildren(), o && (t.style.height = i + "px", t.style.lineHeight = i + "px"), e(t).append("svg").attr("width", r + a.left + a.right).attr("height", i + a.top + a.bottom).append("g").attr("transform", `translate(${a.left},${a.top})`);
+	return t.replaceChildren(), o && (t.style.height = i + "px", t.style.lineHeight = i + "px"), e(t).append("svg").attr("data-testid", "pl-chart-histogram-svg").attr("width", r + a.left + a.right).attr("height", i + a.top + a.bottom).append("g").attr("data-testid", "pl-chart-histogram-plot").attr("transform", `translate(${a.left},${a.top})`);
 }
 //#endregion
 export { t as createSvgContainer };

package/dist/components/PlChartHistogram/createSvgContainer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"createSvgContainer.js","names":[],"sources":["../../../src/components/PlChartHistogram/createSvgContainer.ts"],"sourcesContent":["import type { ChartOptions } from \"./types\";\nimport { select } from \"d3-selection\";\n\nexport function createSvgContainer(el: HTMLElement, options: ChartOptions) {\n const { width, height, margin, compact } = options;\n\n el.replaceChildren();\n\n if (compact) {\n el.style.height = height + \"px\";\n el.style.lineHeight = height + \"px\";\n }\n\n const svg = select(el) // Append the SVG element to the body\n .append(\"svg\")\n .attr(\"width\", width + margin.left + margin.right) // Set the total width\n .attr(\"height\", height + margin.top + margin.bottom) // Set the total height\n .append(\"g\") // Append a group to handle margins\n .attr(\"transform\", `translate(${margin.left},${margin.top})`);\n\n return svg;\n}\n"],"mappings":";;AAGA,SAAgB,EAAmB,GAAiB,GAAuB;CACzE,IAAM,EAAE,UAAO,WAAQ,WAAQ,eAAY;~~AAgB3C~~,~~QAdA~~,EAAG,iBAAiB,EAEhB,MACF,EAAG,MAAM,SAAS,IAAS,MAC3B,EAAG,MAAM,aAAa,IAAS,OAGrB,EAAO,EAAG,CACnB,OAAO,MAAM,CACb,KAAK,SAAS,IAAQ,EAAO,OAAO,EAAO,MAAM,CACjD,KAAK,UAAU,IAAS,EAAO,MAAM,EAAO,OAAO,CACnD,OAAO,IAAI,CACX,KAAK,aAAa,aAAa,EAAO,KAAK,GAAG,EAAO,IAAI,GAAG"}
1	+ {"version":3,"file":"createSvgContainer.js","names":[],"sources":["../../../src/components/PlChartHistogram/createSvgContainer.ts"],"sourcesContent":["import type { ChartOptions } from \"./types\";\nimport { select } from \"d3-selection\";\n\nexport function createSvgContainer(el: HTMLElement, options: ChartOptions) {\n const { width, height, margin, compact } = options;\n\n el.replaceChildren();\n\n if (compact) {\n el.style.height = height + \"px\";\n el.style.lineHeight = height + \"px\";\n }\n\n const svg = select(el) // Append the SVG element to the body\n .append(\"svg\")\n .attr(\"data-testid\", \"pl-chart-histogram-svg\")\n .attr(\"width\", width + margin.left + margin.right) // Set the total width\n .attr(\"height\", height + margin.top + margin.bottom) // Set the total height\n .append(\"g\") // Append a group to handle margins\n .attr(\"data-testid\", \"pl-chart-histogram-plot\")\n .attr(\"transform\", `translate(${margin.left},${margin.top})`);\n\n return svg;\n}\n"],"mappings":";;AAGA,SAAgB,EAAmB,GAAiB,GAAuB;CACzE,IAAM,EAAE,UAAO,WAAQ,WAAQ,eAAY;AAkB3C,QAhBA,EAAG,iBAAiB,EAEhB,MACF,EAAG,MAAM,SAAS,IAAS,MAC3B,EAAG,MAAM,aAAa,IAAS,OAGrB,EAAO,EAAG,CACnB,OAAO,MAAM,CACb,KAAK,eAAe,yBAAyB,CAC7C,KAAK,SAAS,IAAQ,EAAO,OAAO,EAAO,MAAM,CACjD,KAAK,UAAU,IAAS,EAAO,MAAM,EAAO,OAAO,CACnD,OAAO,IAAI,CACX,KAAK,eAAe,0BAA0B,CAC9C,KAAK,aAAa,aAAa,EAAO,KAAK,GAAG,EAAO,IAAI,GAAG"}

package/dist/components/PlChartHistogram/drawBins.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"drawBins.d.ts","sourceRoot":"","sources":["../../../src/components/PlChartHistogram/drawBins.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,SAAS,CAAC;AAGlE,wBAAgB,QAAQ,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,~~QA2C1F~~"}
1	+ {"version":3,"file":"drawBins.d.ts","sourceRoot":"","sources":["../../../src/components/PlChartHistogram/drawBins.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,SAAS,CAAC;AAGlE,wBAAgB,QAAQ,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,QA6C1F"}

package/dist/components/PlChartHistogram/drawBins.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { select as e } from "d3-selection";
 //#region src/components/PlChartHistogram/drawBins.ts
 function t(t, n, r, i) {
-	let { height: a } = r, { x: o, y: s } = i, c = e("body").append("div").attr("class", "svg-tooltip").style("position", "absolute").style("visibility", "hidden");
-	t.selectAll("rect").data(n).enter().append("rect").attr("x", (e) => o(e.x0)).attr("y", (e) => s(e.length)).attr("width", (e) => o(e.x1) - o(e.x0)).attr("height", (e) => a - s(e.length)).style("fill", "#929BAD").attr("stroke", "#fff").attr("stroke-opacity", .2).attr("stroke-width", .5).on("mouseover", function(e, t) {
+	let { height: a } = r, { x: o, y: s } = i, c = e("body").append("div").attr("class", "svg-tooltip").attr("data-testid", "pl-chart-histogram-tooltip").style("position", "absolute").style("visibility", "hidden");
+	t.selectAll("rect").data(n).enter().append("rect").attr("data-testid", "pl-chart-histogram-bar").attr("x", (e) => o(e.x0)).attr("y", (e) => s(e.length)).attr("width", (e) => o(e.x1) - o(e.x0)).attr("height", (e) => a - s(e.length)).style("fill", "#929BAD").attr("stroke", "#fff").attr("stroke-opacity", .2).attr("stroke-width", .5).on("mouseover", function(e, t) {
 		c.style("visibility", "visible").text(`count: ${t.length}\nx0: ${t.x0}\nx1: ${t.x1}`);
 	}).on("mousemove", function(e) {
 		c.style("top", e.pageY - 10 + "px").style("left", e.pageX + 10 + "px");

package/dist/components/PlChartHistogram/drawBins.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"drawBins.js","names":[],"sources":["../../../src/components/PlChartHistogram/drawBins.ts"],"sourcesContent":["import type { BinLike, ChartOptions, Scales, SVG } from \"./types\";\nimport { select } from \"d3-selection\";\n\nexport function drawBins(svg: SVG, bins: BinLike[], dimension: ChartOptions, scales: Scales) {\n const { height } = dimension;\n\n const { x, y } = scales;\n\n const tooltip = select(\"body\")\n .append(\"div\")\n .attr(\"class\", \"svg-tooltip\")\n .style(\"position\", \"absolute\")\n .style(\"visibility\", \"hidden\");\n\n // Three function that change the tooltip when user hover / move / leave a cell\n const mouseover = function (_event: MouseEvent, d: BinLike) {\n tooltip.style(\"visibility\", \"visible\").text(`count: ${d.length}\\nx0: ${d.x0}\\nx1: ${d.x1}`);\n };\n\n const mousemove = function (event: MouseEvent) {\n tooltip.style(\"top\", event.pageY - 10 + \"px\").style(\"left\", event.pageX + 10 + \"px\");\n };\n\n const mouseout = function () {\n tooltip.style(\"visibility\", \"hidden\");\n };\n\n // Add rectangles for the histogram bars\n svg\n .selectAll(\"rect\")\n .data(bins)\n .enter()\n .append(\"rect\")\n .attr(\"x\", (d) => x(d.x0!)) // Position the bar based on the bin start\n .attr(\"y\", (d) => y(d.length)) // Height based on bin count\n .attr(\"width\", (d) => x(d.x1!) - x(d.x0!)) // Bar width based on logarithmic intervals\n .attr(\"height\", (d) => height - y(d.length)) // Invert height to fit SVG coordinate system\n .style(\"fill\", \"#929BAD\")\n .attr(\"stroke\", \"#fff\") // Border color\n .attr(\"stroke-opacity\", 0.2)\n .attr(\"stroke-width\", 0.5)\n .on(\"mouseover\", mouseover)\n .on(\"mousemove\", mousemove)\n .on(\"mouseout\", mouseout)\n .append(\"title\")\n .text((d) => `[${d.x0}, ${d.x1}]\\n` + d.length + \"\\n\"); // Set bar color\n}\n"],"mappings":";;AAGA,SAAgB,EAAS,GAAU,GAAiB,GAAyB,GAAgB;CAC3F,IAAM,EAAE,cAAW,GAEb,EAAE,MAAG,SAAM,GAEX,IAAU,EAAO,OAAO,CAC3B,OAAO,MAAM,CACb,KAAK,SAAS,cAAc,CAC5B,MAAM,YAAY,WAAW,CAC7B,MAAM,cAAc,SAAS;AAgBhC,GACG,UAAU,OAAO,CACjB,KAAK,EAAK,CACV,OAAO,CACP,OAAO,OAAO,CACd,KAAK,MAAM,MAAM,EAAE,EAAE,GAAI,CAAC,CAC1B,KAAK,MAAM,MAAM,EAAE,EAAE,OAAO,CAAC,CAC7B,KAAK,UAAU,MAAM,EAAE,EAAE,GAAI,GAAG,EAAE,EAAE,GAAI,CAAC,CACzC,KAAK,WAAW,MAAM,IAAS,EAAE,EAAE,OAAO,CAAC,CAC3C,MAAM,QAAQ,UAAU,CACxB,KAAK,UAAU,OAAO,CACtB,KAAK,kBAAkB,GAAI,CAC3B,KAAK,gBAAgB,GAAI,CACzB,GAAG,~~aA1BY~~,SAAU,GAAoB,GAAY;AAC1D,IAAQ,MAAM,cAAc,UAAU,CAAC,KAAK,UAAU,EAAE,OAAO,QAAQ,EAAE,GAAG,QAAQ,EAAE,KAAK;~~GAyBhE~~,CAC1B,GAAG,~~aAvBY~~,SAAU,GAAmB;AAC7C,IAAQ,MAAM,OAAO,EAAM,QAAQ,KAAK,KAAK,CAAC,MAAM,QAAQ,EAAM,QAAQ,KAAK,KAAK;~~GAsBzD~~,CAC1B,GAAG,~~YApBW~~,WAAY;AAC3B,IAAQ,MAAM,cAAc,SAAS;~~GAmBZ~~,CACxB,OAAO,QAAQ,CACf,MAAM,MAAM,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,OAAO,EAAE,SAAS,KAAK"}
1	+ {"version":3,"file":"drawBins.js","names":[],"sources":["../../../src/components/PlChartHistogram/drawBins.ts"],"sourcesContent":["import type { BinLike, ChartOptions, Scales, SVG } from \"./types\";\nimport { select } from \"d3-selection\";\n\nexport function drawBins(svg: SVG, bins: BinLike[], dimension: ChartOptions, scales: Scales) {\n const { height } = dimension;\n\n const { x, y } = scales;\n\n const tooltip = select(\"body\")\n .append(\"div\")\n .attr(\"class\", \"svg-tooltip\")\n .attr(\"data-testid\", \"pl-chart-histogram-tooltip\")\n .style(\"position\", \"absolute\")\n .style(\"visibility\", \"hidden\");\n\n // Three function that change the tooltip when user hover / move / leave a cell\n const mouseover = function (_event: MouseEvent, d: BinLike) {\n tooltip.style(\"visibility\", \"visible\").text(`count: ${d.length}\\nx0: ${d.x0}\\nx1: ${d.x1}`);\n };\n\n const mousemove = function (event: MouseEvent) {\n tooltip.style(\"top\", event.pageY - 10 + \"px\").style(\"left\", event.pageX + 10 + \"px\");\n };\n\n const mouseout = function () {\n tooltip.style(\"visibility\", \"hidden\");\n };\n\n // Add rectangles for the histogram bars\n svg\n .selectAll(\"rect\")\n .data(bins)\n .enter()\n .append(\"rect\")\n .attr(\"data-testid\", \"pl-chart-histogram-bar\")\n .attr(\"x\", (d) => x(d.x0!)) // Position the bar based on the bin start\n .attr(\"y\", (d) => y(d.length)) // Height based on bin count\n .attr(\"width\", (d) => x(d.x1!) - x(d.x0!)) // Bar width based on logarithmic intervals\n .attr(\"height\", (d) => height - y(d.length)) // Invert height to fit SVG coordinate system\n .style(\"fill\", \"#929BAD\")\n .attr(\"stroke\", \"#fff\") // Border color\n .attr(\"stroke-opacity\", 0.2)\n .attr(\"stroke-width\", 0.5)\n .on(\"mouseover\", mouseover)\n .on(\"mousemove\", mousemove)\n .on(\"mouseout\", mouseout)\n .append(\"title\")\n .text((d) => `[${d.x0}, ${d.x1}]\\n` + d.length + \"\\n\"); // Set bar color\n}\n"],"mappings":";;AAGA,SAAgB,EAAS,GAAU,GAAiB,GAAyB,GAAgB;CAC3F,IAAM,EAAE,cAAW,GAEb,EAAE,MAAG,SAAM,GAEX,IAAU,EAAO,OAAO,CAC3B,OAAO,MAAM,CACb,KAAK,SAAS,cAAc,CAC5B,KAAK,eAAe,6BAA6B,CACjD,MAAM,YAAY,WAAW,CAC7B,MAAM,cAAc,SAAS;AAgBhC,GACG,UAAU,OAAO,CACjB,KAAK,EAAK,CACV,OAAO,CACP,OAAO,OAAO,CACd,KAAK,eAAe,yBAAyB,CAC7C,KAAK,MAAM,MAAM,EAAE,EAAE,GAAI,CAAC,CAC1B,KAAK,MAAM,MAAM,EAAE,EAAE,OAAO,CAAC,CAC7B,KAAK,UAAU,MAAM,EAAE,EAAE,GAAI,GAAG,EAAE,EAAE,GAAI,CAAC,CACzC,KAAK,WAAW,MAAM,IAAS,EAAE,EAAE,OAAO,CAAC,CAC3C,MAAM,QAAQ,UAAU,CACxB,KAAK,UAAU,OAAO,CACtB,KAAK,kBAAkB,GAAI,CAC3B,KAAK,gBAAgB,GAAI,CACzB,GAAG,aA3BY,SAAU,GAAoB,GAAY;AAC1D,IAAQ,MAAM,cAAc,UAAU,CAAC,KAAK,UAAU,EAAE,OAAO,QAAQ,EAAE,GAAG,QAAQ,EAAE,KAAK;GA0BhE,CAC1B,GAAG,aAxBY,SAAU,GAAmB;AAC7C,IAAQ,MAAM,OAAO,EAAM,QAAQ,KAAK,KAAK,CAAC,MAAM,QAAQ,EAAM,QAAQ,KAAK,KAAK;GAuBzD,CAC1B,GAAG,YArBW,WAAY;AAC3B,IAAQ,MAAM,cAAc,SAAS;GAoBZ,CACxB,OAAO,QAAQ,CACf,MAAM,MAAM,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,OAAO,EAAE,SAAS,KAAK"}

package/dist/components/PlChartHistogram/drawThreshold.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"drawThreshold.d.ts","sourceRoot":"","sources":["../../../src/components/PlChartHistogram/drawThreshold.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,SAAS,CAAC;AAEzD,wBAAgB,aAAa,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,~~QAgB5E~~"}
1	+ {"version":3,"file":"drawThreshold.d.ts","sourceRoot":"","sources":["../../../src/components/PlChartHistogram/drawThreshold.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,SAAS,CAAC;AAEzD,wBAAgB,aAAa,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,QAiB5E"}

package/dist/components/PlChartHistogram/drawThreshold.js CHANGED Viewed

@@ -1,7 +1,7 @@
 //#region src/components/PlChartHistogram/drawThreshold.ts
 function e(e, t, n) {
 	let { threshold: r } = n;
-	r && e.append("line").attr("x1", t.x(r)).attr("x2", t.x(r)).attr("y1", 0).attr("y2", n.height).style("stroke", "#F05670").style("stroke-width", "1").style("stroke-dasharray", "7.4 3.2");
+	r && e.append("line").attr("data-testid", "pl-chart-histogram-threshold").attr("x1", t.x(r)).attr("x2", t.x(r)).attr("y1", 0).attr("y2", n.height).style("stroke", "#F05670").style("stroke-width", "1").style("stroke-dasharray", "7.4 3.2");
 }
 //#endregion
 export { e as drawThreshold };

package/dist/components/PlChartHistogram/drawThreshold.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"drawThreshold.js","names":[],"sources":["../../../src/components/PlChartHistogram/drawThreshold.ts"],"sourcesContent":["import type { ChartOptions, Scales, SVG } from \"./types\";\n\nexport function drawThreshold(svg: SVG, scales: Scales, options: ChartOptions) {\n const { threshold } = options;\n\n if (!threshold) {\n return;\n }\n\n svg\n .append(\"line\")\n .attr(\"x1\", scales.x(threshold))\n .attr(\"x2\", scales.x(threshold))\n .attr(\"y1\", 0)\n .attr(\"y2\", options.height)\n .style(\"stroke\", \"#F05670\")\n .style(\"stroke-width\", \"1\")\n .style(\"stroke-dasharray\", \"7.4 3.2\");\n}\n"],"mappings":";AAEA,SAAgB,EAAc,GAAU,GAAgB,GAAuB;CAC7E,IAAM,EAAE,iBAAc;AAEjB,MAIL,EACG,OAAO,OAAO,CACd,KAAK,MAAM,EAAO,EAAE,EAAU,CAAC,CAC/B,KAAK,MAAM,EAAO,EAAE,EAAU,CAAC,CAC/B,KAAK,MAAM,EAAE,CACb,KAAK,MAAM,EAAQ,OAAO,CAC1B,MAAM,UAAU,UAAU,CAC1B,MAAM,gBAAgB,IAAI,CAC1B,MAAM,oBAAoB,UAAU"}
1	+ {"version":3,"file":"drawThreshold.js","names":[],"sources":["../../../src/components/PlChartHistogram/drawThreshold.ts"],"sourcesContent":["import type { ChartOptions, Scales, SVG } from \"./types\";\n\nexport function drawThreshold(svg: SVG, scales: Scales, options: ChartOptions) {\n const { threshold } = options;\n\n if (!threshold) {\n return;\n }\n\n svg\n .append(\"line\")\n .attr(\"data-testid\", \"pl-chart-histogram-threshold\")\n .attr(\"x1\", scales.x(threshold))\n .attr(\"x2\", scales.x(threshold))\n .attr(\"y1\", 0)\n .attr(\"y2\", options.height)\n .style(\"stroke\", \"#F05670\")\n .style(\"stroke-width\", \"1\")\n .style(\"stroke-dasharray\", \"7.4 3.2\");\n}\n"],"mappings":";AAEA,SAAgB,EAAc,GAAU,GAAgB,GAAuB;CAC7E,IAAM,EAAE,iBAAc;AAEjB,MAIL,EACG,OAAO,OAAO,CACd,KAAK,eAAe,+BAA+B,CACnD,KAAK,MAAM,EAAO,EAAE,EAAU,CAAC,CAC/B,KAAK,MAAM,EAAO,EAAE,EAAU,CAAC,CAC/B,KAAK,MAAM,EAAE,CACb,KAAK,MAAM,EAAQ,OAAO,CAC1B,MAAM,UAAU,UAAU,CAC1B,MAAM,gBAAgB,IAAI,CAC1B,MAAM,oBAAoB,UAAU"}

package/dist/components/PlChartHistogram/histogram.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"histogram.d.ts","sourceRoot":"","sources":["../../../src/components/PlChartHistogram/histogram.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,MAAM,EAAW,YAAY,EAAE,MAAM,SAAS,CAAC;~~AA0B7D~~,wBAAgB,qBAAqB,CAAC,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,EAAE,QA6B3F;AAED,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,EAAE,QA4CxF;AAED,wBAAgB,uBAAuB,CAAC,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE,QA2B9F"}
1	+ {"version":3,"file":"histogram.d.ts","sourceRoot":"","sources":["../../../src/components/PlChartHistogram/histogram.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,MAAM,EAAW,YAAY,EAAE,MAAM,SAAS,CAAC;AA+B7D,wBAAgB,qBAAqB,CAAC,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,EAAE,QA6B3F;AAED,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,EAAE,QA4CxF;AAED,wBAAgB,uBAAuB,CAAC,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE,QA2B9F"}

package/dist/components/PlChartHistogram/histogram.js CHANGED Viewed

@@ -9,7 +9,7 @@ import { axisBottom as s, axisLeft as c } from "d3-axis";
 import { bin as l, max as u, min as d } from "d3-array";
 import { scaleLinear as f, scaleSymlog as p } from "d3-scale";
 //#region src/components/PlChartHistogram/histogram.ts
-var m = (e, t) => e.append("g").style("font-size", "14px").style("font-weight", "500").attr("transform", `translate(0,${t})`), h = (e) => e.append("g").style("font-size", "14px").style("font-weight", "500"), g = (e, t) => f().domain([0, u(e, (e) => e.length)]).range([t, 0]);
+var m = (e, t) => e.append("g").attr("data-testid", "pl-chart-histogram-x-axis").style("font-size", "14px").style("font-weight", "500").attr("transform", `translate(0,${t})`), h = (e) => e.append("g").attr("data-testid", "pl-chart-histogram-y-axis").style("font-size", "14px").style("font-weight", "500"), g = (e, t) => f().domain([0, u(e, (e) => e.length)]).range([t, 0]);
 function _(r, p, _) {
 	let { width: v, height: y, nBins: b = 10 } = p, x = e(r, p), S = d(_), C = u(_), w = f().domain([S, C]).range([0, v]), T = o(l().domain(w.domain()).thresholds(w.ticks(b))(_)), E = g(T, y);
 	n(x, p, {

package/dist/components/PlChartHistogram/histogram.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"histogram.js","names":[],"sources":["../../../src/components/PlChartHistogram/histogram.ts"],"sourcesContent":["import { createSvgContainer } from \"./createSvgContainer\";\nimport { drawBins } from \"./drawBins\";\nimport { createGridlines } from \"./createGridlines\";\nimport { logspace } from \"./logspace\";\nimport { createLabels } from \"./createLabels\";\nimport type { AnyBin, BinLike, ChartOptions } from \"./types\";\nimport { drawThreshold } from \"./drawThreshold\";\nimport { normalizeBins } from \"./normalizeBins\";\nimport type { Selection } from \"d3-selection\";\nimport { bin, max as d3max, min as d3min } from \"d3-array\";\nimport { scaleLinear, scaleSymlog } from \"d3-scale\";\nimport { axisBottom, axisLeft } from \"d3-axis\";\n\nconst gx = (svg: Selection<SVGGElement, unknown, null, undefined>, height: number) => {\n return svg\n .append(\"g\")\n .style(\"font-size\", \"14px\")\n .style(\"font-weight\", \"500\")\n .attr(\"transform\", `translate(0,${height})`);\n};\n\nconst gy = (svg: Selection<SVGGElement, unknown, null, undefined>) => {\n return svg.append(\"g\").style(\"font-size\", \"14px\").style(\"font-weight\", \"500\");\n};\n\nconst createYScale = (bins: BinLike[], height: number) => {\n return scaleLinear()\n .domain([0, d3max(bins, (d) => d.length)!]) // Max bin count for the domain\n .range([height, 0]); // Map to chart height (invert to match SVG coordinates)\n};\n\nexport function createHistogramLinear(el: HTMLElement, options: ChartOptions, data: number[]) {\n const { width, height, nBins = 10 } = options;\n\n const svg = createSvgContainer(el, options);\n\n const min = d3min(data) as number;\n const max = d3max(data) as number;\n\n const x = scaleLinear().domain([min, max]).range([0, width]);\n\n const bins: BinLike[] = normalizeBins(\n bin()\n .domain(x.domain() as [number, number]) // Set the input domain to match the x-scale\n .thresholds(x.ticks(nBins))(data),\n ); // Apply the data to create bins\n\n const y = createYScale(bins, height);\n\n createGridlines(svg, options, { x, y }, (x) => x.ticks(6));\n\n drawBins(svg, bins, options, { x, y });\n\n drawThreshold(svg, { x, y }, options);\n\n gx(svg, height).call(axisBottom(x).tickSize(0));\n\n gy(svg).call(axisLeft(y).tickSize(0));\n\n createLabels(svg, options);\n}\n\nexport function createHistogramLog(el: HTMLElement, options: ChartOptions, data: number[]) {\n const { width, height, nBins = 10 } = options;\n\n const svg = createSvgContainer(el, options);\n\n const min = d3min(data) as number;\n const max = d3max(data) as number;\n\n const x = scaleSymlog()\n .domain([min, max]) // Input range (min and max values of the data)\n .range([0, width])\n .nice(); // Output range (width of the chart)\n\n const createThresholds = (n: number) => {\n const res = [];\n\n for (let i = 0; i <= n; i++) {\n res.push(Number(x.invert(width * (i / n)).toFixed(2)));\n }\n\n return res;\n };\n\n const bins = normalizeBins(\n bin()\n .domain(x.domain() as [number, number]) // Set the input domain to match the x-scale\n .thresholds(createThresholds(nBins))(data),\n ); // Apply the data to create bins\n\n const y = createYScale(bins, height);\n\n const tickValues = logspace(0, Math.ceil(Math.log10(max)), 6);\n\n createGridlines(svg, options, { x, y }, (x) => x.tickValues(tickValues));\n\n drawBins(svg, bins, options, { x, y });\n\n drawThreshold(svg, { x, y }, options);\n\n gx(svg, height).call(axisBottom(x).tickValues(tickValues).tickSize(0));\n\n gy(svg).call(axisLeft(y).tickSize(0));\n\n createLabels(svg, options);\n}\n\nexport function createHistogramFromBins(el: HTMLElement, options: ChartOptions, _bins: AnyBin[]) {\n const { width, height } = options;\n\n const svg = createSvgContainer(el, options);\n\n const bins = normalizeBins(_bins);\n\n const min = d3min(bins, (b) => b.x0) as number;\n const max = d3max(bins, (b) => b.x1) as number;\n\n const x = scaleSymlog().domain([min, max]).range([0, width]).nice();\n\n const y = createYScale(bins, height);\n\n const tickValues = logspace(0, Math.ceil(Math.log10(max)), 6);\n\n createGridlines(svg, options, { x, y }, (x) => x.tickValues(tickValues));\n\n drawBins(svg, bins, options, { x, y });\n\n drawThreshold(svg, { x, y }, options);\n\n gx(svg, height).call(axisBottom(x).tickValues(tickValues).tickSize(0));\n\n gy(svg).call(axisLeft(y).tickSize(0));\n\n createLabels(svg, options);\n}\n"],"mappings":";;;;;;;;;;;AAaA,IAAM,KAAM,GAAuD,MAC1D,EACJ,OAAO,IAAI,CACX,MAAM,aAAa,OAAO,CAC1B,MAAM,eAAe,MAAM,CAC3B,KAAK,aAAa,eAAe,EAAO,GAAG,EAG1C,KAAM,MACH,~~EAAI~~,OAAO,IAAI,~~CAAC~~,MAAM,aAAa,OAAO,~~CAAC~~,MAAM,eAAe,MAAM,~~EAGzE~~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"}
1	+ {"version":3,"file":"histogram.js","names":[],"sources":["../../../src/components/PlChartHistogram/histogram.ts"],"sourcesContent":["import { createSvgContainer } from \"./createSvgContainer\";\nimport { drawBins } from \"./drawBins\";\nimport { createGridlines } from \"./createGridlines\";\nimport { logspace } from \"./logspace\";\nimport { createLabels } from \"./createLabels\";\nimport type { AnyBin, BinLike, ChartOptions } from \"./types\";\nimport { drawThreshold } from \"./drawThreshold\";\nimport { normalizeBins } from \"./normalizeBins\";\nimport type { Selection } from \"d3-selection\";\nimport { bin, max as d3max, min as d3min } from \"d3-array\";\nimport { scaleLinear, scaleSymlog } from \"d3-scale\";\nimport { axisBottom, axisLeft } from \"d3-axis\";\n\nconst gx = (svg: Selection<SVGGElement, unknown, null, undefined>, height: number) => {\n return svg\n .append(\"g\")\n .attr(\"data-testid\", \"pl-chart-histogram-x-axis\")\n .style(\"font-size\", \"14px\")\n .style(\"font-weight\", \"500\")\n .attr(\"transform\", `translate(0,${height})`);\n};\n\nconst gy = (svg: Selection<SVGGElement, unknown, null, undefined>) => {\n return svg\n .append(\"g\")\n .attr(\"data-testid\", \"pl-chart-histogram-y-axis\")\n .style(\"font-size\", \"14px\")\n .style(\"font-weight\", \"500\");\n};\n\nconst createYScale = (bins: BinLike[], height: number) => {\n return scaleLinear()\n .domain([0, d3max(bins, (d) => d.length)!]) // Max bin count for the domain\n .range([height, 0]); // Map to chart height (invert to match SVG coordinates)\n};\n\nexport function createHistogramLinear(el: HTMLElement, options: ChartOptions, data: number[]) {\n const { width, height, nBins = 10 } = options;\n\n const svg = createSvgContainer(el, options);\n\n const min = d3min(data) as number;\n const max = d3max(data) as number;\n\n const x = scaleLinear().domain([min, max]).range([0, width]);\n\n const bins: BinLike[] = normalizeBins(\n bin()\n .domain(x.domain() as [number, number]) // Set the input domain to match the x-scale\n .thresholds(x.ticks(nBins))(data),\n ); // Apply the data to create bins\n\n const y = createYScale(bins, height);\n\n createGridlines(svg, options, { x, y }, (x) => x.ticks(6));\n\n drawBins(svg, bins, options, { x, y });\n\n drawThreshold(svg, { x, y }, options);\n\n gx(svg, height).call(axisBottom(x).tickSize(0));\n\n gy(svg).call(axisLeft(y).tickSize(0));\n\n createLabels(svg, options);\n}\n\nexport function createHistogramLog(el: HTMLElement, options: ChartOptions, data: number[]) {\n const { width, height, nBins = 10 } = options;\n\n const svg = createSvgContainer(el, options);\n\n const min = d3min(data) as number;\n const max = d3max(data) as number;\n\n const x = scaleSymlog()\n .domain([min, max]) // Input range (min and max values of the data)\n .range([0, width])\n .nice(); // Output range (width of the chart)\n\n const createThresholds = (n: number) => {\n const res = [];\n\n for (let i = 0; i <= n; i++) {\n res.push(Number(x.invert(width * (i / n)).toFixed(2)));\n }\n\n return res;\n };\n\n const bins = normalizeBins(\n bin()\n .domain(x.domain() as [number, number]) // Set the input domain to match the x-scale\n .thresholds(createThresholds(nBins))(data),\n ); // Apply the data to create bins\n\n const y = createYScale(bins, height);\n\n const tickValues = logspace(0, Math.ceil(Math.log10(max)), 6);\n\n createGridlines(svg, options, { x, y }, (x) => x.tickValues(tickValues));\n\n drawBins(svg, bins, options, { x, y });\n\n drawThreshold(svg, { x, y }, options);\n\n gx(svg, height).call(axisBottom(x).tickValues(tickValues).tickSize(0));\n\n gy(svg).call(axisLeft(y).tickSize(0));\n\n createLabels(svg, options);\n}\n\nexport function createHistogramFromBins(el: HTMLElement, options: ChartOptions, _bins: AnyBin[]) {\n const { width, height } = options;\n\n const svg = createSvgContainer(el, options);\n\n const bins = normalizeBins(_bins);\n\n const min = d3min(bins, (b) => b.x0) as number;\n const max = d3max(bins, (b) => b.x1) as number;\n\n const x = scaleSymlog().domain([min, max]).range([0, width]).nice();\n\n const y = createYScale(bins, height);\n\n const tickValues = logspace(0, Math.ceil(Math.log10(max)), 6);\n\n createGridlines(svg, options, { x, y }, (x) => x.tickValues(tickValues));\n\n drawBins(svg, bins, options, { x, y });\n\n drawThreshold(svg, { x, y }, options);\n\n gx(svg, height).call(axisBottom(x).tickValues(tickValues).tickSize(0));\n\n gy(svg).call(axisLeft(y).tickSize(0));\n\n createLabels(svg, options);\n}\n"],"mappings":"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"}

package/dist/components/PlChartStackedBar/Legends.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Legends.js","names":[],"sources":["../../../src/components/PlChartStackedBar/Legends.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport type { Color } from \"../../colors\";\n\nfunction splitBy<T>(arr: T[], n: number): T[][] {\n const res = [];\n let chunk: T[] = [];\n\n for (let i = 0; i < arr.length; i++) {\n if (chunk.length < n) {\n chunk.push(arr[i]);\n } else {\n res.push(chunk);\n chunk = [arr[i]];\n }\n }\n\n res.push(chunk);\n\n return res;\n}\n\nconst props = defineProps<{\n maxInColumn?: number;\n legends: {\n color: string \| Color;\n text: string;\n }[];\n}>();\n\nconst groups = computed(() => {\n return splitBy(props.legends, props.maxInColumn ?? 5);\n});\n</script>\n\n<template>\n <div :class=\"$style.component\">\n <div v-for=\"(group, k) in groups\" :key=\"k\" :class=\"$style.legend\">\n <div v-for=\"(l, i) in group\" :key=\"i\" :class=\"$style.item\">\n <div :class=\"$style.chip\" :style=\"{ backgroundColor: l.color.toString() }\" />\n {{ l.text }}\n </div>\n </div>\n </div>\n</template>\n\n<style lang=\"css\" module>\n.component {\n display: flex;\n flex-direction: row;\n gap: 24px;\n justify-content: space-between;\n}\n\n.legend {\n display: flex;\n flex-direction: column;\n gap: 4px;\n flex-wrap: nowrap;\n margin-top: 24px;\n max-height: 120px;\n flex: 1;\n}\n\n.chip {\n width: 16px;\n height: 16px;\n border-radius: 2px;\n flex-grow: 0;\n}\n\n.group {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.item {\n display: flex;\n gap: 8px;\n align-items: center;\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n color: var(--color-txt-01);\n}\n</style>\n"],"mappings":""}
1	+ {"version":3,"file":"Legends.js","names":[],"sources":["../../../src/components/PlChartStackedBar/Legends.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport type { Color } from \"../../colors\";\n\nfunction splitBy<T>(arr: T[], n: number): T[][] {\n const res = [];\n let chunk: T[] = [];\n\n for (let i = 0; i < arr.length; i++) {\n if (chunk.length < n) {\n chunk.push(arr[i]);\n } else {\n res.push(chunk);\n chunk = [arr[i]];\n }\n }\n\n res.push(chunk);\n\n return res;\n}\n\nconst props = defineProps<{\n maxInColumn?: number;\n legends: {\n color: string \| Color;\n text: string;\n }[];\n}>();\n\nconst groups = computed(() => {\n return splitBy(props.legends, props.maxInColumn ?? 5);\n});\n</script>\n\n<template>\n <div data-testid=\"pl-chart-stacked-bar-legend\" :class=\"$style.component\">\n <div\n v-for=\"(group, k) in groups\"\n :key=\"k\"\n data-testid=\"pl-chart-stacked-bar-legend-group\"\n :class=\"$style.legend\"\n >\n <div\n v-for=\"(l, i) in group\"\n :key=\"i\"\n data-testid=\"pl-chart-stacked-bar-legend-item\"\n :class=\"$style.item\"\n >\n <div\n data-testid=\"pl-chart-stacked-bar-legend-chip\"\n :class=\"$style.chip\"\n :style=\"{ backgroundColor: l.color.toString() }\"\n />\n {{ l.text }}\n </div>\n </div>\n </div>\n</template>\n\n<style lang=\"css\" module>\n.component {\n display: flex;\n flex-direction: row;\n gap: 24px;\n justify-content: space-between;\n}\n\n.legend {\n display: flex;\n flex-direction: column;\n gap: 4px;\n flex-wrap: nowrap;\n margin-top: 24px;\n max-height: 120px;\n flex: 1;\n}\n\n.chip {\n width: 16px;\n height: 16px;\n border-radius: 2px;\n flex-grow: 0;\n}\n\n.group {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.item {\n display: flex;\n gap: 8px;\n align-items: center;\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n color: var(--color-txt-01);\n}\n</style>\n"],"mappings":""}

package/dist/components/PlChartStackedBar/Legends.style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Legends.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/PlChartStackedBar/Legends.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport type { Color } from \"../../colors\";\n\nfunction splitBy<T>(arr: T[], n: number): T[][] {\n const res = [];\n let chunk: T[] = [];\n\n for (let i = 0; i < arr.length; i++) {\n if (chunk.length < n) {\n chunk.push(arr[i]);\n } else {\n res.push(chunk);\n chunk = [arr[i]];\n }\n }\n\n res.push(chunk);\n\n return res;\n}\n\nconst props = defineProps<{\n maxInColumn?: number;\n legends: {\n color: string \| Color;\n text: string;\n }[];\n}>();\n\nconst groups = computed(() => {\n return splitBy(props.legends, props.maxInColumn ?? 5);\n});\n</script>\n\n<template>\n <div :class=\"$style.component\">\n <div v-for=\"(group, k) in groups\" :key=\"k\" :class=\"$style.legend\">\n <div v-for=\"(l, i) in group\" :key=\"i\" :class=\"$style.item\">\n <div :class=\"$style.chip\" :style=\"{ backgroundColor: l.color.toString() }\" />\n {{ l.text }}\n </div>\n </div>\n </div>\n</template>\n\n<style lang=\"css\" module>\n.component {\n display: flex;\n flex-direction: row;\n gap: 24px;\n justify-content: space-between;\n}\n\n.legend {\n display: flex;\n flex-direction: column;\n gap: 4px;\n flex-wrap: nowrap;\n margin-top: 24px;\n max-height: 120px;\n flex: 1;\n}\n\n.chip {\n width: 16px;\n height: 16px;\n border-radius: 2px;\n flex-grow: 0;\n}\n\n.group {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.item {\n display: flex;\n gap: 8px;\n align-items: center;\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n color: var(--color-txt-01);\n}\n</style>\n"],"mappings":""}
1	+ {"version":3,"file":"Legends.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/PlChartStackedBar/Legends.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport type { Color } from \"../../colors\";\n\nfunction splitBy<T>(arr: T[], n: number): T[][] {\n const res = [];\n let chunk: T[] = [];\n\n for (let i = 0; i < arr.length; i++) {\n if (chunk.length < n) {\n chunk.push(arr[i]);\n } else {\n res.push(chunk);\n chunk = [arr[i]];\n }\n }\n\n res.push(chunk);\n\n return res;\n}\n\nconst props = defineProps<{\n maxInColumn?: number;\n legends: {\n color: string \| Color;\n text: string;\n }[];\n}>();\n\nconst groups = computed(() => {\n return splitBy(props.legends, props.maxInColumn ?? 5);\n});\n</script>\n\n<template>\n <div data-testid=\"pl-chart-stacked-bar-legend\" :class=\"$style.component\">\n <div\n v-for=\"(group, k) in groups\"\n :key=\"k\"\n data-testid=\"pl-chart-stacked-bar-legend-group\"\n :class=\"$style.legend\"\n >\n <div\n v-for=\"(l, i) in group\"\n :key=\"i\"\n data-testid=\"pl-chart-stacked-bar-legend-item\"\n :class=\"$style.item\"\n >\n <div\n data-testid=\"pl-chart-stacked-bar-legend-chip\"\n :class=\"$style.chip\"\n :style=\"{ backgroundColor: l.color.toString() }\"\n />\n {{ l.text }}\n </div>\n </div>\n </div>\n</template>\n\n<style lang=\"css\" module>\n.component {\n display: flex;\n flex-direction: row;\n gap: 24px;\n justify-content: space-between;\n}\n\n.legend {\n display: flex;\n flex-direction: column;\n gap: 4px;\n flex-wrap: nowrap;\n margin-top: 24px;\n max-height: 120px;\n flex: 1;\n}\n\n.chip {\n width: 16px;\n height: 16px;\n border-radius: 2px;\n flex-grow: 0;\n}\n\n.group {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.item {\n display: flex;\n gap: 8px;\n align-items: center;\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n color: var(--color-txt-01);\n}\n</style>\n"],"mappings":""}

package/dist/components/PlChartStackedBar/Legends.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Legends.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlChartStackedBar/Legends.vue"],"names":[],"mappings":"~~AA2FA~~,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAoB1C,KAAK,WAAW,GAAG;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC;QACtB,IAAI,EAAE,MAAM,CAAC;KACd,EAAE,CAAC;CACL,CAAC;~~AA6DF~~,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
1	+ {"version":3,"file":"Legends.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlChartStackedBar/Legends.vue"],"names":[],"mappings":"AAyGA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAoB1C,KAAK,WAAW,GAAG;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC;QACtB,IAAI,EAAE,MAAM,CAAC;KACd,EAAE,CAAC;CACL,CAAC;AAiEF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/PlChartStackedBar/Legends.vue2.js CHANGED Viewed

@@ -13,13 +13,19 @@ var d = /* @__PURE__ */ a({
 			return n.push(r), n;
 		}
 		let f = a, p = t(() => d(f.legends, f.maxInColumn ?? 5));
-		return (t, a) => (c(), n("div", { class: o(t.$style.component) }, [(c(!0), n(e, null, l(p.value, (a, d) => (c(), n("div", {
+		return (t, a) => (c(), n("div", {
+			"data-testid": "pl-chart-stacked-bar-legend",
+			class: o(t.$style.component)
+		}, [(c(!0), n(e, null, l(p.value, (a, d) => (c(), n("div", {
 			key: d,
+			"data-testid": "pl-chart-stacked-bar-legend-group",
 			class: o(t.$style.legend)
 		}, [(c(!0), n(e, null, l(a, (e, a) => (c(), n("div", {
 			key: a,
+			"data-testid": "pl-chart-stacked-bar-legend-item",
 			class: o(t.$style.item)
 		}, [r("div", {
+			"data-testid": "pl-chart-stacked-bar-legend-chip",
 			class: o(t.$style.chip),
 			style: s({ backgroundColor: e.color.toString() })
 		}, null, 6), i(" " + u(e.text), 1)], 2))), 128))], 2))), 128))], 2));

package/dist/components/PlChartStackedBar/Legends.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Legends.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlChartStackedBar/Legends.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport type { Color } from \"../../colors\";\n\nfunction splitBy<T>(arr: T[], n: number): T[][] {\n const res = [];\n let chunk: T[] = [];\n\n for (let i = 0; i < arr.length; i++) {\n if (chunk.length < n) {\n chunk.push(arr[i]);\n } else {\n res.push(chunk);\n chunk = [arr[i]];\n }\n }\n\n res.push(chunk);\n\n return res;\n}\n\nconst props = defineProps<{\n maxInColumn?: number;\n legends: {\n color: string \| Color;\n text: string;\n }[];\n}>();\n\nconst groups = computed(() => {\n return splitBy(props.legends, props.maxInColumn ?? 5);\n});\n</script>\n\n<template>\n <div :class=\"$style.component\">\n <div v-for=\"(group, k) in groups\" :key=\"k\" :class=\"$style.legend\">\n <div v-for=\"(l, i) in group\" :key=\"i\" :class=\"$style.item\">\n <div :class=\"$style.chip\" :style=\"{ backgroundColor: l.color.toString() }\" />\n {{ l.text }}\n </div>\n </div>\n </div>\n</template>\n\n<style lang=\"css\" module>\n.component {\n display: flex;\n flex-direction: row;\n gap: 24px;\n justify-content: space-between;\n}\n\n.legend {\n display: flex;\n flex-direction: column;\n gap: 4px;\n flex-wrap: nowrap;\n margin-top: 24px;\n max-height: 120px;\n flex: 1;\n}\n\n.chip {\n width: 16px;\n height: 16px;\n border-radius: 2px;\n flex-grow: 0;\n}\n\n.group {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.item {\n display: flex;\n gap: 8px;\n align-items: center;\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n color: var(--color-txt-01);\n}\n</style>\n"],"mappings":";;;;;;;;;EAIA,SAAS,EAAW,GAAU,GAAkB;GAC9C,IAAM,IAAM,EAAE,EACV,IAAa,EAAE;AAEnB,QAAK,IAAI,IAAI,GAAG,IAAI,EAAI,QAAQ,IAC9B,CAAI,EAAM,SAAS,IACjB,EAAM,KAAK,EAAI,GAAG,IAElB,EAAI,KAAK,EAAM,EACf,IAAQ,CAAC,EAAI,GAAG;AAMpB,UAFA,EAAI,KAAK,EAAM,EAER;;EAGT,IAAM,IAAQ,GAQR,IAAS,QACN,EAAQ,EAAM,SAAS,EAAM,eAAe,EAAE,CACrD;yBAIA,~~EAOM~~,OAAA,~~EAPA~~,OAAK,EAAEA,EAAAA,OAAO,UAAS,~~EAAA~~,~~EAAA,EAAA,EAAA,~~GAAA,~~EAC3B,EAKM,GAAA,~~MAAA,~~EALoB~~,EAAA,QAAb,GAAO,~~YAApB~~,~~EAKM~~,OAAA;~~GAL6B~~,KAAK;~~GAAI~~,OAAK,EAAEA,EAAAA,OAAO,OAAM;~~cAC9D~~,~~EAGM~~,GAAA,MAAA,~~EAHgB~~,IAAT,GAAG,~~YAAhB~~,~~EAGM~~,OAAA;~~GAHwB~~,KAAK;~~GAAI~~,OAAK,EAAEA,EAAAA,OAAO,KAAI;~~MACvD~~,~~EAA6E~~,OAAA;~~GAAvE~~,OAAK,EAAEA,EAAAA,OAAO,KAAI;~~GAAG~~,OAAK,EAAA,EAAA,iBAAqB,EAAE,MAAM,UAAQ,EAAA,CAAA;~~iBAAQ~~,~~MAC7E~~,EAAG,EAAE,KAAI,EAAA,EAAA,CAAA,EAAA,EAAA"}
1	+ {"version":3,"file":"Legends.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlChartStackedBar/Legends.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport type { Color } from \"../../colors\";\n\nfunction splitBy<T>(arr: T[], n: number): T[][] {\n const res = [];\n let chunk: T[] = [];\n\n for (let i = 0; i < arr.length; i++) {\n if (chunk.length < n) {\n chunk.push(arr[i]);\n } else {\n res.push(chunk);\n chunk = [arr[i]];\n }\n }\n\n res.push(chunk);\n\n return res;\n}\n\nconst props = defineProps<{\n maxInColumn?: number;\n legends: {\n color: string \| Color;\n text: string;\n }[];\n}>();\n\nconst groups = computed(() => {\n return splitBy(props.legends, props.maxInColumn ?? 5);\n});\n</script>\n\n<template>\n <div data-testid=\"pl-chart-stacked-bar-legend\" :class=\"$style.component\">\n <div\n v-for=\"(group, k) in groups\"\n :key=\"k\"\n data-testid=\"pl-chart-stacked-bar-legend-group\"\n :class=\"$style.legend\"\n >\n <div\n v-for=\"(l, i) in group\"\n :key=\"i\"\n data-testid=\"pl-chart-stacked-bar-legend-item\"\n :class=\"$style.item\"\n >\n <div\n data-testid=\"pl-chart-stacked-bar-legend-chip\"\n :class=\"$style.chip\"\n :style=\"{ backgroundColor: l.color.toString() }\"\n />\n {{ l.text }}\n </div>\n </div>\n </div>\n</template>\n\n<style lang=\"css\" module>\n.component {\n display: flex;\n flex-direction: row;\n gap: 24px;\n justify-content: space-between;\n}\n\n.legend {\n display: flex;\n flex-direction: column;\n gap: 4px;\n flex-wrap: nowrap;\n margin-top: 24px;\n max-height: 120px;\n flex: 1;\n}\n\n.chip {\n width: 16px;\n height: 16px;\n border-radius: 2px;\n flex-grow: 0;\n}\n\n.group {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.item {\n display: flex;\n gap: 8px;\n align-items: center;\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n color: var(--color-txt-01);\n}\n</style>\n"],"mappings":";;;;;;;;;EAIA,SAAS,EAAW,GAAU,GAAkB;GAC9C,IAAM,IAAM,EAAE,EACV,IAAa,EAAE;AAEnB,QAAK,IAAI,IAAI,GAAG,IAAI,EAAI,QAAQ,IAC9B,CAAI,EAAM,SAAS,IACjB,EAAM,KAAK,EAAI,GAAG,IAElB,EAAI,KAAK,EAAM,EACf,IAAQ,CAAC,EAAI,GAAG;AAMpB,UAFA,EAAI,KAAK,EAAM,EAER;;EAGT,IAAM,IAAQ,GAQR,IAAS,QACN,EAAQ,EAAM,SAAS,EAAM,eAAe,EAAE,CACrD;yBAIA,EAqBM,OAAA;GArBD,eAAY;GAA+B,OAAK,EAAEA,EAAAA,OAAO,UAAS;cACrE,EAmBM,GAAA,MAAA,EAlBiB,EAAA,QAAb,GAAO,YADjB,EAmBM,OAAA;GAjBH,KAAK;GACN,eAAY;GACX,OAAK,EAAEA,EAAAA,OAAO,OAAM;cAErB,EAYM,GAAA,MAAA,EAXa,IAAT,GAAG,YADb,EAYM,OAAA;GAVH,KAAK;GACN,eAAY;GACX,OAAK,EAAEA,EAAAA,OAAO,KAAI;MAEnB,EAIE,OAAA;GAHA,eAAY;GACX,OAAK,EAAEA,EAAAA,OAAO,KAAI;GAClB,OAAK,EAAA,EAAA,iBAAqB,EAAE,MAAM,UAAQ,EAAA,CAAA;iBAC3C,MACF,EAAG,EAAE,KAAI,EAAA,EAAA,CAAA,EAAA,EAAA"}

package/dist/components/PlChartStackedBar/PlChartStackedBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlChartStackedBar.js","names":[],"sources":["../../../src/components/PlChartStackedBar/PlChartStackedBar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport StackedRow from \"./StackedRow.vue\";\nimport Legends from \"./Legends.vue\";\nimport type { PlChartStackedBarSettings } from \"./types\";\n\nconst props = defineProps<{\n settings: PlChartStackedBarSettings;\n}>();\n\nconst showLegends = computed(() => props.settings.showLegends ?? true);\n\nconst data = computed(() => {\n return props.settings.data ?? [];\n});\n\nconst legends = computed(() =>\n data.value.map((p) => ({\n color: p.color,\n text: p.label,\n })),\n);\n</script>\n\n<template>\n <div :class=\"$style.component\">\n <div v-if=\"settings.title\" :class=\"$style.title\">{{ settings.title }}</div>\n <StackedRow :value=\"data\" />\n <Legends\n v-if=\"showLegends && legends.length\"\n :legends=\"legends\"\n :max-in-column=\"settings.maxLegendsInColumn\"\n />\n </div>\n</template>\n\n<style lang=\"scss\" module>\n.component {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n.title {\n font-size: 20px;\n font-weight: 500;\n line-height: 24px; /* 120% */\n letter-spacing: -0.2px;\n margin-bottom: 24px;\n}\n</style>\n"],"mappings":""}
1	+ {"version":3,"file":"PlChartStackedBar.js","names":[],"sources":["../../../src/components/PlChartStackedBar/PlChartStackedBar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport StackedRow from \"./StackedRow.vue\";\nimport Legends from \"./Legends.vue\";\nimport type { PlChartStackedBarSettings } from \"./types\";\n\nconst props = defineProps<{\n settings: PlChartStackedBarSettings;\n}>();\n\nconst showLegends = computed(() => props.settings.showLegends ?? true);\n\nconst data = computed(() => {\n return props.settings.data ?? [];\n});\n\nconst legends = computed(() =>\n data.value.map((p) => ({\n color: p.color,\n text: p.label,\n })),\n);\n</script>\n\n<template>\n <div data-testid=\"pl-chart-stacked-bar\" :class=\"$style.component\">\n <div v-if=\"settings.title\" data-testid=\"pl-chart-stacked-bar-title\" :class=\"$style.title\">\n {{ settings.title }}\n </div>\n <StackedRow :value=\"data\" />\n <Legends\n v-if=\"showLegends && legends.length\"\n :legends=\"legends\"\n :max-in-column=\"settings.maxLegendsInColumn\"\n />\n </div>\n</template>\n\n<style lang=\"scss\" module>\n.component {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n.title {\n font-size: 20px;\n font-weight: 500;\n line-height: 24px; /* 120% */\n letter-spacing: -0.2px;\n margin-bottom: 24px;\n}\n</style>\n"],"mappings":""}

package/dist/components/PlChartStackedBar/PlChartStackedBar.style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlChartStackedBar.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/PlChartStackedBar/PlChartStackedBar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport StackedRow from \"./StackedRow.vue\";\nimport Legends from \"./Legends.vue\";\nimport type { PlChartStackedBarSettings } from \"./types\";\n\nconst props = defineProps<{\n settings: PlChartStackedBarSettings;\n}>();\n\nconst showLegends = computed(() => props.settings.showLegends ?? true);\n\nconst data = computed(() => {\n return props.settings.data ?? [];\n});\n\nconst legends = computed(() =>\n data.value.map((p) => ({\n color: p.color,\n text: p.label,\n })),\n);\n</script>\n\n<template>\n <div :class=\"$style.component\">\n <div v-if=\"settings.title\" :class=\"$style.title\">{{ settings.title }}</div>\n <StackedRow :value=\"data\" />\n <Legends\n v-if=\"showLegends && legends.length\"\n :legends=\"legends\"\n :max-in-column=\"settings.maxLegendsInColumn\"\n />\n </div>\n</template>\n\n<style lang=\"scss\" module>\n.component {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n.title {\n font-size: 20px;\n font-weight: 500;\n line-height: 24px; /* 120% */\n letter-spacing: -0.2px;\n margin-bottom: 24px;\n}\n</style>\n"],"mappings":""}
1	+ {"version":3,"file":"PlChartStackedBar.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/PlChartStackedBar/PlChartStackedBar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport StackedRow from \"./StackedRow.vue\";\nimport Legends from \"./Legends.vue\";\nimport type { PlChartStackedBarSettings } from \"./types\";\n\nconst props = defineProps<{\n settings: PlChartStackedBarSettings;\n}>();\n\nconst showLegends = computed(() => props.settings.showLegends ?? true);\n\nconst data = computed(() => {\n return props.settings.data ?? [];\n});\n\nconst legends = computed(() =>\n data.value.map((p) => ({\n color: p.color,\n text: p.label,\n })),\n);\n</script>\n\n<template>\n <div data-testid=\"pl-chart-stacked-bar\" :class=\"$style.component\">\n <div v-if=\"settings.title\" data-testid=\"pl-chart-stacked-bar-title\" :class=\"$style.title\">\n {{ settings.title }}\n </div>\n <StackedRow :value=\"data\" />\n <Legends\n v-if=\"showLegends && legends.length\"\n :legends=\"legends\"\n :max-in-column=\"settings.maxLegendsInColumn\"\n />\n </div>\n</template>\n\n<style lang=\"scss\" module>\n.component {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n.title {\n font-size: 20px;\n font-weight: 500;\n line-height: 24px; /* 120% */\n letter-spacing: -0.2px;\n margin-bottom: 24px;\n}\n</style>\n"],"mappings":""}

package/dist/components/PlChartStackedBar/PlChartStackedBar.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlChartStackedBar.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlChartStackedBar/PlChartStackedBar.vue"],"names":[],"mappings":"~~AAyDA~~,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC;AAEzD,KAAK,WAAW,GAAG;IACjB,QAAQ,EAAE,yBAAyB,CAAC;CACrC,CAAC;~~AA0EF~~,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
1	+ {"version":3,"file":"PlChartStackedBar.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlChartStackedBar/PlChartStackedBar.vue"],"names":[],"mappings":"AA2DA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC;AAEzD,KAAK,WAAW,GAAG;IACjB,QAAQ,EAAE,yBAAyB,CAAC;CACrC,CAAC;AA4EF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/PlChartStackedBar/PlChartStackedBar.vue2.js CHANGED Viewed

@@ -10,9 +10,13 @@ var d = /* @__PURE__ */ s({
 			color: e.color,
 			text: e.label
 		})));
-		return (n, d) => (l(), a("div", { class: c(n.$style.component) }, [
+		return (n, d) => (l(), a("div", {
+			"data-testid": "pl-chart-stacked-bar",
+			class: c(n.$style.component)
+		}, [
 			s.settings.title ? (l(), a("div", {
 				key: 0,
+				"data-testid": "pl-chart-stacked-bar-title",
 				class: c(n.$style.title)
 			}, u(s.settings.title), 3)) : i("", !0),
 			o(e, { value: p.value }, null, 8, ["value"]),

package/dist/components/PlChartStackedBar/PlChartStackedBar.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlChartStackedBar.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlChartStackedBar/PlChartStackedBar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport StackedRow from \"./StackedRow.vue\";\nimport Legends from \"./Legends.vue\";\nimport type { PlChartStackedBarSettings } from \"./types\";\n\nconst props = defineProps<{\n settings: PlChartStackedBarSettings;\n}>();\n\nconst showLegends = computed(() => props.settings.showLegends ?? true);\n\nconst data = computed(() => {\n return props.settings.data ?? [];\n});\n\nconst legends = computed(() =>\n data.value.map((p) => ({\n color: p.color,\n text: p.label,\n })),\n);\n</script>\n\n<template>\n <div :class=\"$style.component\">\n <div v-if=\"settings.title\" :class=\"$style.title\">{{ settings.title }}</div>\n <StackedRow :value=\"data\" />\n <Legends\n v-if=\"showLegends && legends.length\"\n :legends=\"legends\"\n :max-in-column=\"settings.maxLegendsInColumn\"\n />\n </div>\n</template>\n\n<style lang=\"scss\" module>\n.component {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n.title {\n font-size: 20px;\n font-weight: 500;\n line-height: 24px; /* 120% */\n letter-spacing: -0.2px;\n margin-bottom: 24px;\n}\n</style>\n"],"mappings":";;;;;;;;EAMA,IAAM,IAAQ,GAIR,IAAc,QAAe,EAAM,SAAS,eAAe,GAAK,EAEhE,IAAO,QACJ,EAAM,SAAS,QAAQ,EAAE,CAChC,EAEI,IAAU,QACd,EAAK,MAAM,KAAK,OAAO;GACrB,OAAO,EAAE;GACT,MAAM,EAAE;GACT,EAAE,CACJ;yBAIC,~~EAQM~~,OAAA,~~EARA~~,OAAK,EAAEA,EAAAA,OAAO,UAAS,EAAA,~~EAAA;GAChB,EAAA,~~SAAS,SAAA,GAAA,EAApB,~~EAA2E~~,OAAA;;~~IAA/C~~,OAAK,EAAEA,EAAAA,OAAO,MAAK;~~QAAK~~,EAAA,SAAS,MAAK,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;~~GAClE~~,EAA4B,GAAA,EAAf,OAAO,EAAA,OAAI,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA;GAEhB,EAAA,SAAe,EAAA,MAAQ,UAAA,GAAA,EAD/B,EAIE,GAAA;;IAFC,SAAS,EAAA;IACT,iBAAe,EAAA,SAAS"}
1	+ {"version":3,"file":"PlChartStackedBar.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlChartStackedBar/PlChartStackedBar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport StackedRow from \"./StackedRow.vue\";\nimport Legends from \"./Legends.vue\";\nimport type { PlChartStackedBarSettings } from \"./types\";\n\nconst props = defineProps<{\n settings: PlChartStackedBarSettings;\n}>();\n\nconst showLegends = computed(() => props.settings.showLegends ?? true);\n\nconst data = computed(() => {\n return props.settings.data ?? [];\n});\n\nconst legends = computed(() =>\n data.value.map((p) => ({\n color: p.color,\n text: p.label,\n })),\n);\n</script>\n\n<template>\n <div data-testid=\"pl-chart-stacked-bar\" :class=\"$style.component\">\n <div v-if=\"settings.title\" data-testid=\"pl-chart-stacked-bar-title\" :class=\"$style.title\">\n {{ settings.title }}\n </div>\n <StackedRow :value=\"data\" />\n <Legends\n v-if=\"showLegends && legends.length\"\n :legends=\"legends\"\n :max-in-column=\"settings.maxLegendsInColumn\"\n />\n </div>\n</template>\n\n<style lang=\"scss\" module>\n.component {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n\n.title {\n font-size: 20px;\n font-weight: 500;\n line-height: 24px; /* 120% */\n letter-spacing: -0.2px;\n margin-bottom: 24px;\n}\n</style>\n"],"mappings":";;;;;;;;EAMA,IAAM,IAAQ,GAIR,IAAc,QAAe,EAAM,SAAS,eAAe,GAAK,EAEhE,IAAO,QACJ,EAAM,SAAS,QAAQ,EAAE,CAChC,EAEI,IAAU,QACd,EAAK,MAAM,KAAK,OAAO;GACrB,OAAO,EAAE;GACT,MAAM,EAAE;GACT,EAAE,CACJ;yBAIC,EAUM,OAAA;GAVD,eAAY;GAAwB,OAAK,EAAEA,EAAAA,OAAO,UAAS;;GACnD,EAAA,SAAS,SAAA,GAAA,EAApB,EAEM,OAAA;;IAFqB,eAAY;IAA8B,OAAK,EAAEA,EAAAA,OAAO,MAAK;QACnF,EAAA,SAAS,MAAK,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;GAEnB,EAA4B,GAAA,EAAf,OAAO,EAAA,OAAI,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA;GAEhB,EAAA,SAAe,EAAA,MAAQ,UAAA,GAAA,EAD/B,EAIE,GAAA;;IAFC,SAAS,EAAA;IACT,iBAAe,EAAA,SAAS"}

package/dist/components/PlChartStackedBar/PlChartStackedBarCompact.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlChartStackedBarCompact.js","names":[],"sources":["../../../src/components/PlChartStackedBar/PlChartStackedBarCompact.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport type { PlChartStackedBarSettingsCompact } from \"./types\";\nimport StackedRowCompact from \"./StackedRowCompact.vue\";\n\nconst props = defineProps<{\n settings: PlChartStackedBarSettingsCompact;\n}>();\n\nconst data = computed(() => {\n return props.settings.data ?? [];\n});\n</script>\n\n<template>\n <div :class=\"$style.component\">\n <StackedRowCompact :value=\"data\" />\n </div>\n</template>\n\n<style lang=\"scss\" module>\n.component {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n</style>\n"],"mappings":""}
1	+ {"version":3,"file":"PlChartStackedBarCompact.js","names":[],"sources":["../../../src/components/PlChartStackedBar/PlChartStackedBarCompact.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport type { PlChartStackedBarSettingsCompact } from \"./types\";\nimport StackedRowCompact from \"./StackedRowCompact.vue\";\n\nconst props = defineProps<{\n settings: PlChartStackedBarSettingsCompact;\n}>();\n\nconst data = computed(() => {\n return props.settings.data ?? [];\n});\n</script>\n\n<template>\n <div data-testid=\"pl-chart-stacked-bar-compact\" :class=\"$style.component\">\n <StackedRowCompact :value=\"data\" />\n </div>\n</template>\n\n<style lang=\"scss\" module>\n.component {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n</style>\n"],"mappings":""}

package/dist/components/PlChartStackedBar/PlChartStackedBarCompact.style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlChartStackedBarCompact.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/PlChartStackedBar/PlChartStackedBarCompact.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport type { PlChartStackedBarSettingsCompact } from \"./types\";\nimport StackedRowCompact from \"./StackedRowCompact.vue\";\n\nconst props = defineProps<{\n settings: PlChartStackedBarSettingsCompact;\n}>();\n\nconst data = computed(() => {\n return props.settings.data ?? [];\n});\n</script>\n\n<template>\n <div :class=\"$style.component\">\n <StackedRowCompact :value=\"data\" />\n </div>\n</template>\n\n<style lang=\"scss\" module>\n.component {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n</style>\n"],"mappings":""}
1	+ {"version":3,"file":"PlChartStackedBarCompact.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/PlChartStackedBar/PlChartStackedBarCompact.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport type { PlChartStackedBarSettingsCompact } from \"./types\";\nimport StackedRowCompact from \"./StackedRowCompact.vue\";\n\nconst props = defineProps<{\n settings: PlChartStackedBarSettingsCompact;\n}>();\n\nconst data = computed(() => {\n return props.settings.data ?? [];\n});\n</script>\n\n<template>\n <div data-testid=\"pl-chart-stacked-bar-compact\" :class=\"$style.component\">\n <StackedRowCompact :value=\"data\" />\n </div>\n</template>\n\n<style lang=\"scss\" module>\n.component {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n</style>\n"],"mappings":""}

package/dist/components/PlChartStackedBar/PlChartStackedBarCompact.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlChartStackedBarCompact.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlChartStackedBar/PlChartStackedBarCompact.vue"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAE,gCAAgC,EAAE,MAAM,SAAS,CAAC;AAGhE,KAAK,WAAW,GAAG;IACjB,QAAQ,EAAE,gCAAgC,CAAC;CAC5C,CAAC;~~AA4CF~~,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
1	+ {"version":3,"file":"PlChartStackedBarCompact.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlChartStackedBar/PlChartStackedBarCompact.vue"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAE,gCAAgC,EAAE,MAAM,SAAS,CAAC;AAGhE,KAAK,WAAW,GAAG;IACjB,QAAQ,EAAE,gCAAgC,CAAC;CAC5C,CAAC;AA6CF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/PlChartStackedBar/PlChartStackedBarCompact.vue2.js CHANGED Viewed

@@ -6,7 +6,10 @@ var s = /* @__PURE__ */ i({
 	props: { settings: {} },
 	setup(i) {
 		let s = i, c = t(() => s.settings.data ?? []);
-		return (t, i) => (o(), n("div", { class: a(t.$style.component) }, [r(e, { value: c.value }, null, 8, ["value"])], 2));
+		return (t, i) => (o(), n("div", {
+			"data-testid": "pl-chart-stacked-bar-compact",
+			class: a(t.$style.component)
+		}, [r(e, { value: c.value }, null, 8, ["value"])], 2));
 	}
 });
 //#endregion

package/dist/components/PlChartStackedBar/PlChartStackedBarCompact.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlChartStackedBarCompact.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlChartStackedBar/PlChartStackedBarCompact.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport type { PlChartStackedBarSettingsCompact } from \"./types\";\nimport StackedRowCompact from \"./StackedRowCompact.vue\";\n\nconst props = defineProps<{\n settings: PlChartStackedBarSettingsCompact;\n}>();\n\nconst data = computed(() => {\n return props.settings.data ?? [];\n});\n</script>\n\n<template>\n <div :class=\"$style.component\">\n <StackedRowCompact :value=\"data\" />\n </div>\n</template>\n\n<style lang=\"scss\" module>\n.component {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n</style>\n"],"mappings":";;;;;;;EAKA,IAAM,IAAQ,GAIR,IAAO,QACJ,EAAM,SAAS,QAAQ,EAAE,CAChC;yBAIA,EAEM,OAAA,~~EAFA~~,OAAK,EAAEA,EAAAA,OAAO,UAAS,~~EAAA,EAAA,CAC3B,~~EAAmC,GAAA,EAAf,OAAO,EAAA,OAAI,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA,CAAA,EAAA,EAAA"}
1	+ {"version":3,"file":"PlChartStackedBarCompact.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlChartStackedBar/PlChartStackedBarCompact.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport type { PlChartStackedBarSettingsCompact } from \"./types\";\nimport StackedRowCompact from \"./StackedRowCompact.vue\";\n\nconst props = defineProps<{\n settings: PlChartStackedBarSettingsCompact;\n}>();\n\nconst data = computed(() => {\n return props.settings.data ?? [];\n});\n</script>\n\n<template>\n <div data-testid=\"pl-chart-stacked-bar-compact\" :class=\"$style.component\">\n <StackedRowCompact :value=\"data\" />\n </div>\n</template>\n\n<style lang=\"scss\" module>\n.component {\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n</style>\n"],"mappings":";;;;;;;EAKA,IAAM,IAAQ,GAIR,IAAO,QACJ,EAAM,SAAS,QAAQ,EAAE,CAChC;yBAIA,EAEM,OAAA;GAFD,eAAY;GAAgC,OAAK,EAAEA,EAAAA,OAAO,UAAS;MACtE,EAAmC,GAAA,EAAf,OAAO,EAAA,OAAI,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA,CAAA,EAAA,EAAA"}

package/dist/components/PlChartStackedBar/StackedRow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StackedRow.js","names":[],"sources":["../../../src/components/PlChartStackedBar/StackedRow.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport type { PlChartStackedBarSegment } from \"./types\";\n\nconst props = defineProps<{\n value: PlChartStackedBarSegment[];\n height?: number;\n}>();\n\nconst style = computed(() => ({\n height: props.height ?? \"100%\",\n minHeight: \"82px\",\n}));\n\nconst parts = computed(() => {\n const parts = props.value \|\| [];\n const total = parts.reduce((res, it) => res + it.value, 0);\n return parts.map((p) => {\n const fraction = (p.value / total) * 100;\n const label = p.label;\n return {\n color: p.color.toString(),\n description: p.description,\n fraction,\n label,\n };\n });\n});\n\nconst trackTransforms = [-40, -50, -50, -50, -80];\n</script>\n\n<template>\n <div :class=\"[$style.component]\" :style=\"style\">\n <div :class=\"$style.track\">\n <div\n v-for=\"(v, i) in [0, 25, 50, 75, 100]\"\n :key=\"i\"\n :style=\"{\n left: `${v}%`,\n '--transform': `translateX(${trackTransforms[i]}%)`,\n }\"\n :data-content=\"`${v}%`\"\n />\n </div>\n <div :class=\"$style.container\">\n <div v-if=\"!parts.length\" :class=\"$style.notReady\">Not ready</div>\n <div\n v-for=\"(p, i) in parts\"\n :key=\"i\"\n :title.prop=\"p.description ?? p.label\"\n :style=\"{\n width: `${p.fraction}%`,\n backgroundColor: p.color,\n }\"\n />\n </div>\n </div>\n</template>\n\n<style lang=\"scss\" module>\n.component {\n height: auto;\n position: relative;\n overflow: visible;\n border: 1px solid var(--txt-01);\n padding: 12px 6px;\n border-radius: 0;\n margin-bottom: 24px;\n}\n\n.container {\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n align-items: center;\n overflow: hidden;\n > div {\n height: 100%;\n display: flex;\n align-items: center;\n }\n}\n\n.track {\n position: absolute;\n top: 0;\n left: 6px;\n right: 6px;\n bottom: 0;\n /* z-index: 1; */\n > div {\n height: 100%;\n position: absolute;\n bottom: 0;\n border-left: 1px solid #e1e3eb;\n &::after {\n position: absolute;\n content: attr(data-content);\n transform: var(--transform);\n left: 0;\n bottom: -24px;\n }\n }\n}\n\n.notReady {\n color: var(--txt-03) !important;\n}\n\n.component .notReady {\n font-size: larger;\n font-weight: bolder;\n color: var(--txt-mask);\n margin-left: 24px;\n}\n\n.component .container {\n position: relative;\n z-index: 1;\n}\n</style>\n"],"mappings":""}
1	+ {"version":3,"file":"StackedRow.js","names":[],"sources":["../../../src/components/PlChartStackedBar/StackedRow.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport type { PlChartStackedBarSegment } from \"./types\";\n\nconst props = defineProps<{\n value: PlChartStackedBarSegment[];\n height?: number;\n}>();\n\nconst style = computed(() => ({\n height: props.height ?? \"100%\",\n minHeight: \"82px\",\n}));\n\nconst parts = computed(() => {\n const parts = props.value \|\| [];\n const total = parts.reduce((res, it) => res + it.value, 0);\n return parts.map((p) => {\n const fraction = (p.value / total) * 100;\n const label = p.label;\n return {\n color: p.color.toString(),\n description: p.description,\n fraction,\n label,\n };\n });\n});\n\nconst trackTransforms = [-40, -50, -50, -50, -80];\n</script>\n\n<template>\n <div data-testid=\"pl-chart-stacked-bar-row\" :class=\"[$style.component]\" :style=\"style\">\n <div data-testid=\"pl-chart-stacked-bar-track\" :class=\"$style.track\">\n <div\n v-for=\"(v, i) in [0, 25, 50, 75, 100]\"\n :key=\"i\"\n data-testid=\"pl-chart-stacked-bar-tick\"\n :style=\"{\n left: `${v}%`,\n '--transform': `translateX(${trackTransforms[i]}%)`,\n }\"\n :data-content=\"`${v}%`\"\n />\n </div>\n <div data-testid=\"pl-chart-stacked-bar-bar\" :class=\"$style.container\">\n <div\n v-if=\"!parts.length\"\n data-testid=\"pl-chart-stacked-bar-not-ready\"\n :class=\"$style.notReady\"\n >\n Not ready\n </div>\n <div\n v-for=\"(p, i) in parts\"\n :key=\"i\"\n data-testid=\"pl-chart-stacked-bar-segment\"\n :title.prop=\"p.description ?? p.label\"\n :style=\"{\n width: `${p.fraction}%`,\n backgroundColor: p.color,\n }\"\n />\n </div>\n </div>\n</template>\n\n<style lang=\"scss\" module>\n.component {\n height: auto;\n position: relative;\n overflow: visible;\n border: 1px solid var(--txt-01);\n padding: 12px 6px;\n border-radius: 0;\n margin-bottom: 24px;\n}\n\n.container {\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n align-items: center;\n overflow: hidden;\n > div {\n height: 100%;\n display: flex;\n align-items: center;\n }\n}\n\n.track {\n position: absolute;\n top: 0;\n left: 6px;\n right: 6px;\n bottom: 0;\n /* z-index: 1; */\n > div {\n height: 100%;\n position: absolute;\n bottom: 0;\n border-left: 1px solid #e1e3eb;\n &::after {\n position: absolute;\n content: attr(data-content);\n transform: var(--transform);\n left: 0;\n bottom: -24px;\n }\n }\n}\n\n.notReady {\n color: var(--txt-03) !important;\n}\n\n.component .notReady {\n font-size: larger;\n font-weight: bolder;\n color: var(--txt-mask);\n margin-left: 24px;\n}\n\n.component .container {\n position: relative;\n z-index: 1;\n}\n</style>\n"],"mappings":""}

package/dist/components/PlChartStackedBar/StackedRow.style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StackedRow.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/PlChartStackedBar/StackedRow.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport type { PlChartStackedBarSegment } from \"./types\";\n\nconst props = defineProps<{\n value: PlChartStackedBarSegment[];\n height?: number;\n}>();\n\nconst style = computed(() => ({\n height: props.height ?? \"100%\",\n minHeight: \"82px\",\n}));\n\nconst parts = computed(() => {\n const parts = props.value \|\| [];\n const total = parts.reduce((res, it) => res + it.value, 0);\n return parts.map((p) => {\n const fraction = (p.value / total) * 100;\n const label = p.label;\n return {\n color: p.color.toString(),\n description: p.description,\n fraction,\n label,\n };\n });\n});\n\nconst trackTransforms = [-40, -50, -50, -50, -80];\n</script>\n\n<template>\n <div :class=\"[$style.component]\" :style=\"style\">\n <div :class=\"$style.track\">\n <div\n v-for=\"(v, i) in [0, 25, 50, 75, 100]\"\n :key=\"i\"\n :style=\"{\n left: `${v}%`,\n '--transform': `translateX(${trackTransforms[i]}%)`,\n }\"\n :data-content=\"`${v}%`\"\n />\n </div>\n <div :class=\"$style.container\">\n <div v-if=\"!parts.length\" :class=\"$style.notReady\">Not ready</div>\n <div\n v-for=\"(p, i) in parts\"\n :key=\"i\"\n :title.prop=\"p.description ?? p.label\"\n :style=\"{\n width: `${p.fraction}%`,\n backgroundColor: p.color,\n }\"\n />\n </div>\n </div>\n</template>\n\n<style lang=\"scss\" module>\n.component {\n height: auto;\n position: relative;\n overflow: visible;\n border: 1px solid var(--txt-01);\n padding: 12px 6px;\n border-radius: 0;\n margin-bottom: 24px;\n}\n\n.container {\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n align-items: center;\n overflow: hidden;\n > div {\n height: 100%;\n display: flex;\n align-items: center;\n }\n}\n\n.track {\n position: absolute;\n top: 0;\n left: 6px;\n right: 6px;\n bottom: 0;\n /* z-index: 1; */\n > div {\n height: 100%;\n position: absolute;\n bottom: 0;\n border-left: 1px solid #e1e3eb;\n &::after {\n position: absolute;\n content: attr(data-content);\n transform: var(--transform);\n left: 0;\n bottom: -24px;\n }\n }\n}\n\n.notReady {\n color: var(--txt-03) !important;\n}\n\n.component .notReady {\n font-size: larger;\n font-weight: bolder;\n color: var(--txt-mask);\n margin-left: 24px;\n}\n\n.component .container {\n position: relative;\n z-index: 1;\n}\n</style>\n"],"mappings":""}
1	+ {"version":3,"file":"StackedRow.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/PlChartStackedBar/StackedRow.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport type { PlChartStackedBarSegment } from \"./types\";\n\nconst props = defineProps<{\n value: PlChartStackedBarSegment[];\n height?: number;\n}>();\n\nconst style = computed(() => ({\n height: props.height ?? \"100%\",\n minHeight: \"82px\",\n}));\n\nconst parts = computed(() => {\n const parts = props.value \|\| [];\n const total = parts.reduce((res, it) => res + it.value, 0);\n return parts.map((p) => {\n const fraction = (p.value / total) * 100;\n const label = p.label;\n return {\n color: p.color.toString(),\n description: p.description,\n fraction,\n label,\n };\n });\n});\n\nconst trackTransforms = [-40, -50, -50, -50, -80];\n</script>\n\n<template>\n <div data-testid=\"pl-chart-stacked-bar-row\" :class=\"[$style.component]\" :style=\"style\">\n <div data-testid=\"pl-chart-stacked-bar-track\" :class=\"$style.track\">\n <div\n v-for=\"(v, i) in [0, 25, 50, 75, 100]\"\n :key=\"i\"\n data-testid=\"pl-chart-stacked-bar-tick\"\n :style=\"{\n left: `${v}%`,\n '--transform': `translateX(${trackTransforms[i]}%)`,\n }\"\n :data-content=\"`${v}%`\"\n />\n </div>\n <div data-testid=\"pl-chart-stacked-bar-bar\" :class=\"$style.container\">\n <div\n v-if=\"!parts.length\"\n data-testid=\"pl-chart-stacked-bar-not-ready\"\n :class=\"$style.notReady\"\n >\n Not ready\n </div>\n <div\n v-for=\"(p, i) in parts\"\n :key=\"i\"\n data-testid=\"pl-chart-stacked-bar-segment\"\n :title.prop=\"p.description ?? p.label\"\n :style=\"{\n width: `${p.fraction}%`,\n backgroundColor: p.color,\n }\"\n />\n </div>\n </div>\n</template>\n\n<style lang=\"scss\" module>\n.component {\n height: auto;\n position: relative;\n overflow: visible;\n border: 1px solid var(--txt-01);\n padding: 12px 6px;\n border-radius: 0;\n margin-bottom: 24px;\n}\n\n.container {\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n align-items: center;\n overflow: hidden;\n > div {\n height: 100%;\n display: flex;\n align-items: center;\n }\n}\n\n.track {\n position: absolute;\n top: 0;\n left: 6px;\n right: 6px;\n bottom: 0;\n /* z-index: 1; */\n > div {\n height: 100%;\n position: absolute;\n bottom: 0;\n border-left: 1px solid #e1e3eb;\n &::after {\n position: absolute;\n content: attr(data-content);\n transform: var(--transform);\n left: 0;\n bottom: -24px;\n }\n }\n}\n\n.notReady {\n color: var(--txt-03) !important;\n}\n\n.component .notReady {\n font-size: larger;\n font-weight: bolder;\n color: var(--txt-mask);\n margin-left: 24px;\n}\n\n.component .container {\n position: relative;\n z-index: 1;\n}\n</style>\n"],"mappings":""}

package/dist/components/PlChartStackedBar/StackedRow.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StackedRow.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlChartStackedBar/StackedRow.vue"],"names":[],"mappings":"~~AA+HA~~,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAExD,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,wBAAwB,EAAE,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;~~AAmGF~~,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
1	+ {"version":3,"file":"StackedRow.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlChartStackedBar/StackedRow.vue"],"names":[],"mappings":"AAuIA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAExD,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,wBAAwB,EAAE,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAyGF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/PlChartStackedBar/StackedRow.vue2.js CHANGED Viewed

@@ -29,9 +29,13 @@ var u = ["data-content"], d = [".title"], f = /* @__PURE__ */ a({
 			-80
 		];
 		return (t, a) => (c(), r("div", {
+			"data-testid": "pl-chart-stacked-bar-row",
 			class: o([t.$style.component]),
 			style: s(p.value)
-		}, [i("div", { class: o(t.$style.track) }, [(c(), r(e, null, l([
+		}, [i("div", {
+			"data-testid": "pl-chart-stacked-bar-track",
+			class: o(t.$style.track)
+		}, [(c(), r(e, null, l([
 			0,
 			25,
 			50,
@@ -39,16 +43,22 @@ var u = ["data-content"], d = [".title"], f = /* @__PURE__ */ a({
 			100
 		], (e, t) => i("div", {
 			key: t,
+			"data-testid": "pl-chart-stacked-bar-tick",
 			style: s({
 				left: `${e}%`,
 				"--transform": `translateX(${h[t]}%)`
 			}),
 			"data-content": `${e}%`
-		}, null, 12, u)), 64))], 2), i("div", { class: o(t.$style.container) }, [m.value.length ? n("", !0) : (c(), r("div", {
+		}, null, 12, u)), 64))], 2), i("div", {
+			"data-testid": "pl-chart-stacked-bar-bar",
+			class: o(t.$style.container)
+		}, [m.value.length ? n("", !0) : (c(), r("div", {
 			key: 0,
+			"data-testid": "pl-chart-stacked-bar-not-ready",
 			class: o(t.$style.notReady)
-		}, "Not ready", 2)), (c(!0), r(e, null, l(m.value, (e, t) => (c(), r("div", {
+		}, " Not ready ", 2)), (c(!0), r(e, null, l(m.value, (e, t) => (c(), r("div", {
 			key: t,
+			"data-testid": "pl-chart-stacked-bar-segment",
 			".title": e.description ?? e.label,
 			style: s({
 				width: `${e.fraction}%`,

package/dist/components/PlChartStackedBar/StackedRow.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StackedRow.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlChartStackedBar/StackedRow.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport type { PlChartStackedBarSegment } from \"./types\";\n\nconst props = defineProps<{\n value: PlChartStackedBarSegment[];\n height?: number;\n}>();\n\nconst style = computed(() => ({\n height: props.height ?? \"100%\",\n minHeight: \"82px\",\n}));\n\nconst parts = computed(() => {\n const parts = props.value \|\| [];\n const total = parts.reduce((res, it) => res + it.value, 0);\n return parts.map((p) => {\n const fraction = (p.value / total) * 100;\n const label = p.label;\n return {\n color: p.color.toString(),\n description: p.description,\n fraction,\n label,\n };\n });\n});\n\nconst trackTransforms = [-40, -50, -50, -50, -80];\n</script>\n\n<template>\n <div :class=\"[$style.component]\" :style=\"style\">\n <div :class=\"$style.track\">\n <div\n v-for=\"(v, i) in [0, 25, 50, 75, 100]\"\n :key=\"i\"\n :style=\"{\n left: `${v}%`,\n '--transform': `translateX(${trackTransforms[i]}%)`,\n }\"\n :data-content=\"`${v}%`\"\n />\n </div>\n <div :class=\"$style.container\">\n <div v-if=\"!parts.length\" :class=\"$style.notReady\">Not ready</div>\n <div\n v-for=\"(p, i) in parts\"\n :key=\"i\"\n :title.prop=\"p.description ?? p.label\"\n :style=\"{\n width: `${p.fraction}%`,\n backgroundColor: p.color,\n }\"\n />\n </div>\n </div>\n</template>\n\n<style lang=\"scss\" module>\n.component {\n height: auto;\n position: relative;\n overflow: visible;\n border: 1px solid var(--txt-01);\n padding: 12px 6px;\n border-radius: 0;\n margin-bottom: 24px;\n}\n\n.container {\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n align-items: center;\n overflow: hidden;\n > div {\n height: 100%;\n display: flex;\n align-items: center;\n }\n}\n\n.track {\n position: absolute;\n top: 0;\n left: 6px;\n right: 6px;\n bottom: 0;\n /* z-index: 1; */\n > div {\n height: 100%;\n position: absolute;\n bottom: 0;\n border-left: 1px solid #e1e3eb;\n &::after {\n position: absolute;\n content: attr(data-content);\n transform: var(--transform);\n left: 0;\n bottom: -24px;\n }\n }\n}\n\n.notReady {\n color: var(--txt-03) !important;\n}\n\n.component .notReady {\n font-size: larger;\n font-weight: bolder;\n color: var(--txt-mask);\n margin-left: 24px;\n}\n\n.component .container {\n position: relative;\n z-index: 1;\n}\n</style>\n"],"mappings":";;;;;;;;;EAIA,IAAM,IAAQ,GAKR,IAAQ,SAAgB;GAC5B,QAAQ,EAAM,UAAU;GACxB,WAAW;GACZ,EAAE,EAEG,IAAQ,QAAe;GAC3B,IAAM,IAAQ,EAAM,SAAS,EAAE,EACzB,IAAQ,EAAM,QAAQ,GAAK,MAAO,IAAM,EAAG,OAAO,EAAE;AAC1D,UAAO,EAAM,KAAK,MAAM;IACtB,IAAM,IAAY,EAAE,QAAQ,IAAS,KAC/B,IAAQ,EAAE;AAChB,WAAO;KACL,OAAO,EAAE,MAAM,UAAU;KACzB,aAAa,EAAE;KACf;KACA;KACD;KACD;IACF,EAEI,IAAkB;GAAC;GAAK;GAAK;GAAK;GAAK;GAAI;yBAI/C,~~EAwBM~~,OAAA;~~GAxBA~~,OAAK,EAAA,CAAGA,EAAAA,OAAO,UAAS,CAAA;GAAI,OAAK,EAAE,EAAA,MAAK;~~MAC5C~~,~~EAUM~~,OAAA,~~EAVA~~,OAAK,EAAEA,EAAAA,OAAO,MAAK,~~EAAA~~,~~EAAA,EAAA,~~GAAA,~~EACvB,EAQE,GAAA,~~MAAA,~~EAPiB~~;GAAA;GAAA;GAAA;GAAA;GAAA;GAAoB,GAA7B,GAAG,MADb,~~EAQE~~,OAAA;~~GANC~~,KAAK;~~GACL~~,OAAK,EAAA;aAAuB,EAAC;iCAA4C,EAAgB,GAAC;;GAI1F,gBAAY,GAAK,EAAC;+BAGvB,~~EAWM~~,OAAA,~~EAXA~~,OAAK,EAAEA,EAAAA,OAAO,UAAS,EAAA,~~EAAA,CACf,EAAA,~~MAAM,~~SAA0C~~,EAAA,IAAA,GAAA,~~IAA1C~~,GAAA,~~EAAlB~~,~~EAAkE~~,OAAA;;~~GAAvC~~,OAAK,EAAEA,EAAAA,OAAO,SAAQ;~~KAAE~~,~~aAAS~~,EAAA,IAAA,EAAA,GAAA,~~EAC5D~~,~~EAQE~~,GAAA,MAAA,~~EAPiB~~,EAAA,QAAT,GAAG,YADb,~~EAQE~~,OAAA;~~GANC~~,KAAK;~~GACL~~,UAAY,EAAE,eAAe,EAAE;GAC/B,OAAK,EAAA;cAAwB,EAAE,SAAQ;qBAAgC,EAAE"}
1	+ {"version":3,"file":"StackedRow.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlChartStackedBar/StackedRow.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport type { PlChartStackedBarSegment } from \"./types\";\n\nconst props = defineProps<{\n value: PlChartStackedBarSegment[];\n height?: number;\n}>();\n\nconst style = computed(() => ({\n height: props.height ?? \"100%\",\n minHeight: \"82px\",\n}));\n\nconst parts = computed(() => {\n const parts = props.value \|\| [];\n const total = parts.reduce((res, it) => res + it.value, 0);\n return parts.map((p) => {\n const fraction = (p.value / total) * 100;\n const label = p.label;\n return {\n color: p.color.toString(),\n description: p.description,\n fraction,\n label,\n };\n });\n});\n\nconst trackTransforms = [-40, -50, -50, -50, -80];\n</script>\n\n<template>\n <div data-testid=\"pl-chart-stacked-bar-row\" :class=\"[$style.component]\" :style=\"style\">\n <div data-testid=\"pl-chart-stacked-bar-track\" :class=\"$style.track\">\n <div\n v-for=\"(v, i) in [0, 25, 50, 75, 100]\"\n :key=\"i\"\n data-testid=\"pl-chart-stacked-bar-tick\"\n :style=\"{\n left: `${v}%`,\n '--transform': `translateX(${trackTransforms[i]}%)`,\n }\"\n :data-content=\"`${v}%`\"\n />\n </div>\n <div data-testid=\"pl-chart-stacked-bar-bar\" :class=\"$style.container\">\n <div\n v-if=\"!parts.length\"\n data-testid=\"pl-chart-stacked-bar-not-ready\"\n :class=\"$style.notReady\"\n >\n Not ready\n </div>\n <div\n v-for=\"(p, i) in parts\"\n :key=\"i\"\n data-testid=\"pl-chart-stacked-bar-segment\"\n :title.prop=\"p.description ?? p.label\"\n :style=\"{\n width: `${p.fraction}%`,\n backgroundColor: p.color,\n }\"\n />\n </div>\n </div>\n</template>\n\n<style lang=\"scss\" module>\n.component {\n height: auto;\n position: relative;\n overflow: visible;\n border: 1px solid var(--txt-01);\n padding: 12px 6px;\n border-radius: 0;\n margin-bottom: 24px;\n}\n\n.container {\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n align-items: center;\n overflow: hidden;\n > div {\n height: 100%;\n display: flex;\n align-items: center;\n }\n}\n\n.track {\n position: absolute;\n top: 0;\n left: 6px;\n right: 6px;\n bottom: 0;\n /* z-index: 1; */\n > div {\n height: 100%;\n position: absolute;\n bottom: 0;\n border-left: 1px solid #e1e3eb;\n &::after {\n position: absolute;\n content: attr(data-content);\n transform: var(--transform);\n left: 0;\n bottom: -24px;\n }\n }\n}\n\n.notReady {\n color: var(--txt-03) !important;\n}\n\n.component .notReady {\n font-size: larger;\n font-weight: bolder;\n color: var(--txt-mask);\n margin-left: 24px;\n}\n\n.component .container {\n position: relative;\n z-index: 1;\n}\n</style>\n"],"mappings":";;;;;;;;;EAIA,IAAM,IAAQ,GAKR,IAAQ,SAAgB;GAC5B,QAAQ,EAAM,UAAU;GACxB,WAAW;GACZ,EAAE,EAEG,IAAQ,QAAe;GAC3B,IAAM,IAAQ,EAAM,SAAS,EAAE,EACzB,IAAQ,EAAM,QAAQ,GAAK,MAAO,IAAM,EAAG,OAAO,EAAE;AAC1D,UAAO,EAAM,KAAK,MAAM;IACtB,IAAM,IAAY,EAAE,QAAQ,IAAS,KAC/B,IAAQ,EAAE;AAChB,WAAO;KACL,OAAO,EAAE,MAAM,UAAU;KACzB,aAAa,EAAE;KACf;KACA;KACD;KACD;IACF,EAEI,IAAkB;GAAC;GAAK;GAAK;GAAK;GAAK;GAAI;yBAI/C,EAgCM,OAAA;GAhCD,eAAY;GAA4B,OAAK,EAAA,CAAGA,EAAAA,OAAO,UAAS,CAAA;GAAI,OAAK,EAAE,EAAA,MAAK;MACnF,EAWM,OAAA;GAXD,eAAY;GAA8B,OAAK,EAAEA,EAAAA,OAAO,MAAK;YAChE,EASE,GAAA,MAAA,EARiB;GAAA;GAAA;GAAA;GAAA;GAAA;GAAoB,GAA7B,GAAG,MADb,EASE,OAAA;GAPC,KAAK;GACN,eAAY;GACX,OAAK,EAAA;aAAuB,EAAC;iCAA4C,EAAgB,GAAC;;GAI1F,gBAAY,GAAK,EAAC;+BAGvB,EAkBM,OAAA;GAlBD,eAAY;GAA4B,OAAK,EAAEA,EAAAA,OAAO,UAAS;MAEzD,EAAA,MAAM,SAKf,EAAA,IAAA,GAAA,IALe,GAAA,EADf,EAMM,OAAA;;GAJJ,eAAY;GACX,OAAK,EAAEA,EAAAA,OAAO,SAAQ;KACxB,eAED,EAAA,IAAA,EAAA,GAAA,EACA,EASE,GAAA,MAAA,EARiB,EAAA,QAAT,GAAG,YADb,EASE,OAAA;GAPC,KAAK;GACN,eAAY;GACX,UAAY,EAAE,eAAe,EAAE;GAC/B,OAAK,EAAA;cAAwB,EAAE,SAAQ;qBAAgC,EAAE"}

package/dist/components/PlChartStackedBar/StackedRowCompact.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StackedRowCompact.js","names":[],"sources":["../../../src/components/PlChartStackedBar/StackedRowCompact.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport type { PlChartStackedBarSegment } from \"./types\";\n\nconst props = defineProps<{\n value: PlChartStackedBarSegment[];\n height?: number;\n}>();\n\nconst style = computed(() => ({\n height: props.height ?? \"100%\",\n minHeight: \"24px\",\n}));\n\nconst parts = computed(() => {\n const parts = props.value \|\| [];\n const total = parts.reduce((res, it) => res + it.value, 0);\n return parts.map((p) => {\n const fraction = (p.value / total) * 100;\n const label = p.label;\n return {\n color: p.color.toString(),\n description: p.description,\n fraction,\n label,\n };\n });\n});\n</script>\n\n<template>\n <div :class=\"[$style.component]\" :style=\"style\">\n <div :class=\"$style.container\">\n <div v-if=\"!parts.length\" :class=\"$style.notReady\">Not ready</div>\n <div\n v-for=\"(p, i) in parts\"\n :key=\"i\"\n :title.prop=\"p.description ?? p.label\"\n :style=\"{\n width: `${p.fraction}%`,\n backgroundColor: p.color,\n }\"\n />\n </div>\n </div>\n</template>\n\n<style lang=\"scss\" module>\n.component {\n display: flex;\n position: relative;\n overflow: hidden;\n padding: 0;\n border-radius: 2px;\n\n .notReady {\n color: var(--txt-01);\n font-family: var(--font-family-base);\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n line-height: 20px;\n }\n\n .container {\n position: relative;\n }\n}\n\n.container {\n display: flex;\n flex-direction: row;\n width: 100%;\n flex: 1;\n align-items: center;\n overflow: hidden;\n > div {\n height: 100%;\n display: flex;\n align-items: center;\n }\n}\n\n.notReady {\n color: var(--txt-03) !important;\n}\n</style>\n"],"mappings":""}
1	+ {"version":3,"file":"StackedRowCompact.js","names":[],"sources":["../../../src/components/PlChartStackedBar/StackedRowCompact.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport type { PlChartStackedBarSegment } from \"./types\";\n\nconst props = defineProps<{\n value: PlChartStackedBarSegment[];\n height?: number;\n}>();\n\nconst style = computed(() => ({\n height: props.height ?? \"100%\",\n minHeight: \"24px\",\n}));\n\nconst parts = computed(() => {\n const parts = props.value \|\| [];\n const total = parts.reduce((res, it) => res + it.value, 0);\n return parts.map((p) => {\n const fraction = (p.value / total) * 100;\n const label = p.label;\n return {\n color: p.color.toString(),\n description: p.description,\n fraction,\n label,\n };\n });\n});\n</script>\n\n<template>\n <div data-testid=\"pl-chart-stacked-bar-compact-row\" :class=\"[$style.component]\" :style=\"style\">\n <div data-testid=\"pl-chart-stacked-bar-compact-bar\" :class=\"$style.container\">\n <div\n v-if=\"!parts.length\"\n data-testid=\"pl-chart-stacked-bar-compact-not-ready\"\n :class=\"$style.notReady\"\n >\n Not ready\n </div>\n <div\n v-for=\"(p, i) in parts\"\n :key=\"i\"\n data-testid=\"pl-chart-stacked-bar-compact-segment\"\n :title.prop=\"p.description ?? p.label\"\n :style=\"{\n width: `${p.fraction}%`,\n backgroundColor: p.color,\n }\"\n />\n </div>\n </div>\n</template>\n\n<style lang=\"scss\" module>\n.component {\n display: flex;\n position: relative;\n overflow: hidden;\n padding: 0;\n border-radius: 2px;\n\n .notReady {\n color: var(--txt-01);\n font-family: var(--font-family-base);\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n line-height: 20px;\n }\n\n .container {\n position: relative;\n }\n}\n\n.container {\n display: flex;\n flex-direction: row;\n width: 100%;\n flex: 1;\n align-items: center;\n overflow: hidden;\n > div {\n height: 100%;\n display: flex;\n align-items: center;\n }\n}\n\n.notReady {\n color: var(--txt-03) !important;\n}\n</style>\n"],"mappings":""}

package/dist/components/PlChartStackedBar/StackedRowCompact.style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StackedRowCompact.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/PlChartStackedBar/StackedRowCompact.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport type { PlChartStackedBarSegment } from \"./types\";\n\nconst props = defineProps<{\n value: PlChartStackedBarSegment[];\n height?: number;\n}>();\n\nconst style = computed(() => ({\n height: props.height ?? \"100%\",\n minHeight: \"24px\",\n}));\n\nconst parts = computed(() => {\n const parts = props.value \|\| [];\n const total = parts.reduce((res, it) => res + it.value, 0);\n return parts.map((p) => {\n const fraction = (p.value / total) * 100;\n const label = p.label;\n return {\n color: p.color.toString(),\n description: p.description,\n fraction,\n label,\n };\n });\n});\n</script>\n\n<template>\n <div :class=\"[$style.component]\" :style=\"style\">\n <div :class=\"$style.container\">\n <div v-if=\"!parts.length\" :class=\"$style.notReady\">Not ready</div>\n <div\n v-for=\"(p, i) in parts\"\n :key=\"i\"\n :title.prop=\"p.description ?? p.label\"\n :style=\"{\n width: `${p.fraction}%`,\n backgroundColor: p.color,\n }\"\n />\n </div>\n </div>\n</template>\n\n<style lang=\"scss\" module>\n.component {\n display: flex;\n position: relative;\n overflow: hidden;\n padding: 0;\n border-radius: 2px;\n\n .notReady {\n color: var(--txt-01);\n font-family: var(--font-family-base);\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n line-height: 20px;\n }\n\n .container {\n position: relative;\n }\n}\n\n.container {\n display: flex;\n flex-direction: row;\n width: 100%;\n flex: 1;\n align-items: center;\n overflow: hidden;\n > div {\n height: 100%;\n display: flex;\n align-items: center;\n }\n}\n\n.notReady {\n color: var(--txt-03) !important;\n}\n</style>\n"],"mappings":""}
1	+ {"version":3,"file":"StackedRowCompact.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/PlChartStackedBar/StackedRowCompact.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport type { PlChartStackedBarSegment } from \"./types\";\n\nconst props = defineProps<{\n value: PlChartStackedBarSegment[];\n height?: number;\n}>();\n\nconst style = computed(() => ({\n height: props.height ?? \"100%\",\n minHeight: \"24px\",\n}));\n\nconst parts = computed(() => {\n const parts = props.value \|\| [];\n const total = parts.reduce((res, it) => res + it.value, 0);\n return parts.map((p) => {\n const fraction = (p.value / total) * 100;\n const label = p.label;\n return {\n color: p.color.toString(),\n description: p.description,\n fraction,\n label,\n };\n });\n});\n</script>\n\n<template>\n <div data-testid=\"pl-chart-stacked-bar-compact-row\" :class=\"[$style.component]\" :style=\"style\">\n <div data-testid=\"pl-chart-stacked-bar-compact-bar\" :class=\"$style.container\">\n <div\n v-if=\"!parts.length\"\n data-testid=\"pl-chart-stacked-bar-compact-not-ready\"\n :class=\"$style.notReady\"\n >\n Not ready\n </div>\n <div\n v-for=\"(p, i) in parts\"\n :key=\"i\"\n data-testid=\"pl-chart-stacked-bar-compact-segment\"\n :title.prop=\"p.description ?? p.label\"\n :style=\"{\n width: `${p.fraction}%`,\n backgroundColor: p.color,\n }\"\n />\n </div>\n </div>\n</template>\n\n<style lang=\"scss\" module>\n.component {\n display: flex;\n position: relative;\n overflow: hidden;\n padding: 0;\n border-radius: 2px;\n\n .notReady {\n color: var(--txt-01);\n font-family: var(--font-family-base);\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n line-height: 20px;\n }\n\n .container {\n position: relative;\n }\n}\n\n.container {\n display: flex;\n flex-direction: row;\n width: 100%;\n flex: 1;\n align-items: center;\n overflow: hidden;\n > div {\n height: 100%;\n display: flex;\n align-items: center;\n }\n}\n\n.notReady {\n color: var(--txt-03) !important;\n}\n</style>\n"],"mappings":""}

package/dist/components/PlChartStackedBar/StackedRowCompact.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StackedRowCompact.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlChartStackedBar/StackedRowCompact.vue"],"names":[],"mappings":"~~AA2FA~~,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAExD,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,wBAAwB,EAAE,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;~~AA8EF~~,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
1	+ {"version":3,"file":"StackedRowCompact.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlChartStackedBar/StackedRowCompact.vue"],"names":[],"mappings":"AAkGA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAExD,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,wBAAwB,EAAE,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAkFF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/PlChartStackedBar/StackedRowCompact.vue2.js CHANGED Viewed

@@ -23,13 +23,19 @@ var u = [".title"], d = /* @__PURE__ */ a({
 			});
 		});
 		return (t, a) => (c(), r("div", {
+			"data-testid": "pl-chart-stacked-bar-compact-row",
 			class: o([t.$style.component]),
 			style: s(f.value)
-		}, [i("div", { class: o(t.$style.container) }, [p.value.length ? n("", !0) : (c(), r("div", {
+		}, [i("div", {
+			"data-testid": "pl-chart-stacked-bar-compact-bar",
+			class: o(t.$style.container)
+		}, [p.value.length ? n("", !0) : (c(), r("div", {
 			key: 0,
+			"data-testid": "pl-chart-stacked-bar-compact-not-ready",
 			class: o(t.$style.notReady)
-		}, "Not ready", 2)), (c(!0), r(e, null, l(p.value, (e, t) => (c(), r("div", {
+		}, " Not ready ", 2)), (c(!0), r(e, null, l(p.value, (e, t) => (c(), r("div", {
 			key: t,
+			"data-testid": "pl-chart-stacked-bar-compact-segment",
 			".title": e.description ?? e.label,
 			style: s({
 				width: `${e.fraction}%`,

package/dist/components/PlChartStackedBar/StackedRowCompact.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StackedRowCompact.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlChartStackedBar/StackedRowCompact.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport type { PlChartStackedBarSegment } from \"./types\";\n\nconst props = defineProps<{\n value: PlChartStackedBarSegment[];\n height?: number;\n}>();\n\nconst style = computed(() => ({\n height: props.height ?? \"100%\",\n minHeight: \"24px\",\n}));\n\nconst parts = computed(() => {\n const parts = props.value \|\| [];\n const total = parts.reduce((res, it) => res + it.value, 0);\n return parts.map((p) => {\n const fraction = (p.value / total) * 100;\n const label = p.label;\n return {\n color: p.color.toString(),\n description: p.description,\n fraction,\n label,\n };\n });\n});\n</script>\n\n<template>\n <div :class=\"[$style.component]\" :style=\"style\">\n <div :class=\"$style.container\">\n <div v-if=\"!parts.length\" :class=\"$style.notReady\">Not ready</div>\n <div\n v-for=\"(p, i) in parts\"\n :key=\"i\"\n :title.prop=\"p.description ?? p.label\"\n :style=\"{\n width: `${p.fraction}%`,\n backgroundColor: p.color,\n }\"\n />\n </div>\n </div>\n</template>\n\n<style lang=\"scss\" module>\n.component {\n display: flex;\n position: relative;\n overflow: hidden;\n padding: 0;\n border-radius: 2px;\n\n .notReady {\n color: var(--txt-01);\n font-family: var(--font-family-base);\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n line-height: 20px;\n }\n\n .container {\n position: relative;\n }\n}\n\n.container {\n display: flex;\n flex-direction: row;\n width: 100%;\n flex: 1;\n align-items: center;\n overflow: hidden;\n > div {\n height: 100%;\n display: flex;\n align-items: center;\n }\n}\n\n.notReady {\n color: var(--txt-03) !important;\n}\n</style>\n"],"mappings":";;;;;;;;;EAIA,IAAM,IAAQ,GAKR,IAAQ,SAAgB;GAC5B,QAAQ,EAAM,UAAU;GACxB,WAAW;GACZ,EAAE,EAEG,IAAQ,QAAe;GAC3B,IAAM,IAAQ,EAAM,SAAS,EAAE,EACzB,IAAQ,EAAM,QAAQ,GAAK,MAAO,IAAM,EAAG,OAAO,EAAE;AAC1D,UAAO,EAAM,KAAK,MAAM;IACtB,IAAM,IAAY,EAAE,QAAQ,IAAS,KAC/B,IAAQ,EAAE;AAChB,WAAO;KACL,OAAO,EAAE,MAAM,UAAU;KACzB,aAAa,EAAE;KACf;KACA;KACD;KACD;IACF;yBAIA,~~EAaM~~,OAAA;~~GAbA~~,OAAK,EAAA,CAAGA,EAAAA,OAAO,UAAS,CAAA;GAAI,OAAK,EAAE,EAAA,MAAK;~~MAC5C~~,~~EAWM~~,OAAA,~~EAXA~~,OAAK,EAAEA,EAAAA,OAAO,UAAS,EAAA,~~EAAA,CACf,EAAA,~~MAAM,~~SAA0C~~,EAAA,IAAA,GAAA,~~IAA1C~~,GAAA,~~EAAlB~~,~~EAAkE~~,OAAA;;~~GAAvC~~,OAAK,EAAEA,EAAAA,OAAO,SAAQ;~~KAAE~~,~~aAAS~~,EAAA,IAAA,EAAA,GAAA,~~EAC5D~~,~~EAQE~~,GAAA,MAAA,~~EAPiB~~,EAAA,QAAT,GAAG,YADb,~~EAQE~~,OAAA;~~GANC~~,KAAK;~~GACL~~,UAAY,EAAE,eAAe,EAAE;GAC/B,OAAK,EAAA;cAAwB,EAAE,SAAQ;qBAAgC,EAAE"}
1	+ {"version":3,"file":"StackedRowCompact.vue_vue_type_script_setup_true_lang.js","names":["$style"],"sources":["../../../src/components/PlChartStackedBar/StackedRowCompact.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from \"vue\";\nimport type { PlChartStackedBarSegment } from \"./types\";\n\nconst props = defineProps<{\n value: PlChartStackedBarSegment[];\n height?: number;\n}>();\n\nconst style = computed(() => ({\n height: props.height ?? \"100%\",\n minHeight: \"24px\",\n}));\n\nconst parts = computed(() => {\n const parts = props.value \|\| [];\n const total = parts.reduce((res, it) => res + it.value, 0);\n return parts.map((p) => {\n const fraction = (p.value / total) * 100;\n const label = p.label;\n return {\n color: p.color.toString(),\n description: p.description,\n fraction,\n label,\n };\n });\n});\n</script>\n\n<template>\n <div data-testid=\"pl-chart-stacked-bar-compact-row\" :class=\"[$style.component]\" :style=\"style\">\n <div data-testid=\"pl-chart-stacked-bar-compact-bar\" :class=\"$style.container\">\n <div\n v-if=\"!parts.length\"\n data-testid=\"pl-chart-stacked-bar-compact-not-ready\"\n :class=\"$style.notReady\"\n >\n Not ready\n </div>\n <div\n v-for=\"(p, i) in parts\"\n :key=\"i\"\n data-testid=\"pl-chart-stacked-bar-compact-segment\"\n :title.prop=\"p.description ?? p.label\"\n :style=\"{\n width: `${p.fraction}%`,\n backgroundColor: p.color,\n }\"\n />\n </div>\n </div>\n</template>\n\n<style lang=\"scss\" module>\n.component {\n display: flex;\n position: relative;\n overflow: hidden;\n padding: 0;\n border-radius: 2px;\n\n .notReady {\n color: var(--txt-01);\n font-family: var(--font-family-base);\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n line-height: 20px;\n }\n\n .container {\n position: relative;\n }\n}\n\n.container {\n display: flex;\n flex-direction: row;\n width: 100%;\n flex: 1;\n align-items: center;\n overflow: hidden;\n > div {\n height: 100%;\n display: flex;\n align-items: center;\n }\n}\n\n.notReady {\n color: var(--txt-03) !important;\n}\n</style>\n"],"mappings":";;;;;;;;;EAIA,IAAM,IAAQ,GAKR,IAAQ,SAAgB;GAC5B,QAAQ,EAAM,UAAU;GACxB,WAAW;GACZ,EAAE,EAEG,IAAQ,QAAe;GAC3B,IAAM,IAAQ,EAAM,SAAS,EAAE,EACzB,IAAQ,EAAM,QAAQ,GAAK,MAAO,IAAM,EAAG,OAAO,EAAE;AAC1D,UAAO,EAAM,KAAK,MAAM;IACtB,IAAM,IAAY,EAAE,QAAQ,IAAS,KAC/B,IAAQ,EAAE;AAChB,WAAO;KACL,OAAO,EAAE,MAAM,UAAU;KACzB,aAAa,EAAE;KACf;KACA;KACD;KACD;IACF;yBAIA,EAoBM,OAAA;GApBD,eAAY;GAAoC,OAAK,EAAA,CAAGA,EAAAA,OAAO,UAAS,CAAA;GAAI,OAAK,EAAE,EAAA,MAAK;MAC3F,EAkBM,OAAA;GAlBD,eAAY;GAAoC,OAAK,EAAEA,EAAAA,OAAO,UAAS;MAEjE,EAAA,MAAM,SAKf,EAAA,IAAA,GAAA,IALe,GAAA,EADf,EAMM,OAAA;;GAJJ,eAAY;GACX,OAAK,EAAEA,EAAAA,OAAO,SAAQ;KACxB,eAED,EAAA,IAAA,EAAA,GAAA,EACA,EASE,GAAA,MAAA,EARiB,EAAA,QAAT,GAAG,YADb,EASE,OAAA;GAPC,KAAK;GACN,eAAY;GACX,UAAY,EAAE,eAAe,EAAE;GAC/B,OAAK,EAAA;cAAwB,EAAE,SAAQ;qBAAgC,EAAE"}