@shtabapp/ui-kit 1.74.0 → 1.75.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [@shtabapp/ui-kit-v1.75.0](https://gitlab.com/mstikharev/shtab-ui-kit/compare/@shtabapp/ui-kit@1.74.0...@shtabapp/ui-kit@1.75.0) (2026-10-16)
+
+### Features
+
+- **charts:** виджеты отчёта по проекту — pie, segmented bar, bar и SRoadmap ([c9f5fe3](https://gitlab.com/mstikharev/shtab-ui-kit/commit/c9f5fe3ec36b2f8ec277aeed22227171c7e5c64c))
+
 ## [@shtabapp/ui-kit-v1.74.0](https://gitlab.com/mstikharev/shtab-ui-kit/compare/@shtabapp/ui-kit@1.73.0...@shtabapp/ui-kit@1.74.0) (2026-09-13)
 
 ### Features

package/dist/SChartBar-BvytQ-2z.js

@@ -0,0 +1,293 @@
+import { T as e, b as t, d as n, f as r, i, n as a, r as o, t as s, u as c, x as l } from "./useChartInteractivity-DygkiRA1.js";
+import { t as u } from "./SChartLegend-dDqLhvIj.js";
+import { t as d } from "./resolveCssColorValue-DH_SEZj4.js";
+import { t as f } from "./buildCartesianChartScales-EofFq3ry.js";
+import { t as p } from "./resolveChartValueRange-DZybnmaX.js";
+import { t as m } from "./resolveBarStackedSeriesColor-CjwUxrUx.js";
+import { t as h } from "./applyChartHighlightedYTick-DmsstRVM.js";
+import { t as g } from "./splitChartAxisLabel-D-IFyucJ.js";
+import { n as _, t as v } from "./buildChartSeriesPoints-BTyOpkin.js";
+import { t as y } from "./useHasListener-RSjlUyqH.js";
+import { computed as b, createBlock as x, createCommentVNode as S, createElementBlock as C, createElementVNode as w, createVNode as T, defineComponent as E, normalizeClass as D, openBlock as O, unref as k, useTemplateRef as A, withCtx as j } from "vue";
+//#region src/components/SChartBar/utils/createBarTargetLinePlugin.ts
+var M = 1, N = [4, 4], P = "500 10px var(--s-ui-font-family-label)", F = 4, I = (e) => e.length > 0 && new Set(e).size === 1, L = ({ target: n, colorHostElement: r, rightAxisId: i }) => ({
+	id: "barTargetLine",
+	afterDatasetsDraw(a) {
+		if (!n || n.values.length === 0) return;
+		let o = n.axis === "right" ? i : "y", s = a.scales[o], c = a.scales.x;
+		if (!s || !c) return;
+		let { ctx: l, chartArea: u } = a, f = n.color ? d(n.color, r) : t(e.grid, r);
+		l.save(), l.strokeStyle = f, l.lineWidth = M, l.setLineDash(n.solid ? [] : N);
+		let [p] = n.values;
+		if (p !== void 0 && I(n.values)) {
+			let e = s.getPixelForValue(p);
+			l.beginPath(), l.moveTo(u.left, e), l.lineTo(u.right, e), l.stroke(), n.label && (l.setLineDash([]), l.fillStyle = f, l.font = P, l.textAlign = "left", l.fillText(n.label, u.left, e - F));
+		} else {
+			let e = (u.right - u.left) / n.values.length;
+			n.values.forEach((t, n) => {
+				if (t <= 0) return;
+				let r = s.getPixelForValue(t);
+				l.beginPath(), l.moveTo(u.left + e * n, r), l.lineTo(u.left + e * (n + 1), r), l.stroke();
+			});
+		}
+		l.restore();
+	}
+}), R = 4, z = 10, B = 500, V = "sans-serif", H = (e) => typeof window > "u" ? `${B} ${z}px ${V}` : `${B} ${z}px ${getComputedStyle(e ?? document.documentElement).getPropertyValue("--s-ui-font-family-label").trim() || V}`, U = ({ colorHostElement: n, formatValue: r }) => ({
+	id: "barValueLabel",
+	afterDatasetsDraw(a) {
+		let o = t(e.barValueLabel, n), s = t(e.barValueLabelMuted, n), { ctx: c } = a;
+		c.save(), c.font = H(n), c.textAlign = "center", a.data.datasets.forEach((e, t) => {
+			a.isDatasetVisible(t) && a.getDatasetMeta(t).data.forEach((n, l) => {
+				let u = e.data[l];
+				if (typeof u != "number") return;
+				let d = u < 0;
+				c.fillStyle = i(a, t, l) ? s : o, c.textBaseline = d ? "top" : "bottom", c.fillText(r ? r(u) : String(u), n.x, d ? n.y + R : n.y - R);
+			});
+		}), c.restore();
+	}
+}), W = 5, G = 4, K = 12, q = "yRight", J = "yMirror", Y = 1.05, ee = 16, te = .92, ne = 1, re = (e, t) => e.data.datasets.every((n, r) => !e.isDatasetVisible(r) || i(e, r, t)), X = (e, t, n, r) => p(e.flatMap((e) => e.points.map((e) => e.value * Y)), {
+	yMin: t,
+	yMax: n,
+	yStep: r
+}), Z = ({ seriesList: i, colorHostElement: a, yMax: s, yMin: l, yStep: u = W, rightYMax: p, rightYStep: _ = W, mirrorYAxis: v = !1, target: y, skeleton: b = !1, showValues: x = !1, formatValue: S, formatYTick: C, mode: w = "grouped", categories: T = [], highlightedYTick: E, onPointClick: D }) => {
+	if (i.length === 0) return null;
+	let O = i.filter((e) => e.axis !== "right"), k = i.filter((e) => e.axis === "right"), A = t(e.axisLabel, a), j = t(e.grid, a), M = t(e.tooltipBackground, a), N = t(e.tooltipText, a), P = t(e.barAxisLabelMuted, a), F = X(O, l, s, u), I = X(k, void 0, p, _), R = w === "histogram", z = T.map((e) => d(e.color, a)), B = f({
+		axisLabelColor: A,
+		gridColor: j,
+		yMin: F.min,
+		yMax: F.max,
+		yStep: u,
+		xTickFontSize: K,
+		...C ? { formatYAxisTick: (e) => typeof e == "number" ? C(e) : e } : {}
+	}), V = E && !b ? h(B.y.ticks, {
+		highlightedTick: E,
+		yStep: u,
+		axisLabelColor: A,
+		colorHostElement: a
+	}) : { ticks: B.y.ticks }, H = R ? {
+		...B.y,
+		display: !1
+	} : {
+		...B.y,
+		...V
+	}, Y = (e, t) => ({
+		type: "linear",
+		position: "right",
+		min: e,
+		max: t,
+		border: { display: !1 },
+		grid: { drawOnChartArea: !1 },
+		...V
+	}), Z = k.length > 0 ? { [q]: Y(I.min, I.max) } : v && !R ? { [J]: Y(F.min, F.max) } : {}, Q = {
+		x: {
+			...B.x,
+			...R ? { border: {
+				display: !0,
+				color: j
+			} } : {},
+			ticks: {
+				...B.x.ticks,
+				color: ({ chart: e, index: t }) => re(e, t) ? P : A
+			}
+		},
+		y: H,
+		...Z
+	}, $ = o({
+		kind: "segment",
+		skeleton: b,
+		colorHostElement: a,
+		onElementIndexClick: D
+	});
+	return {
+		type: "bar",
+		data: {
+			labels: i[0]?.points.map((e) => g(e.label)) ?? [],
+			datasets: i.map((e, t) => {
+				let n = m(t, a, e.fillColor, b), r = e.points.map((e) => e.fillColor ? d(e.fillColor, a) : (e.category === void 0 ? void 0 : z[e.category]) ?? n);
+				return {
+					label: e.label,
+					data: e.points.map((e) => e.value),
+					backgroundColor: r,
+					hoverBackgroundColor: r,
+					borderWidth: 0,
+					hoverBorderWidth: 0,
+					borderRadius: G,
+					yAxisID: e.axis === "right" ? q : "y",
+					captions: e.points.map((e) => e.caption),
+					categories: e.points.map((e) => e.category),
+					...R ? {
+						barPercentage: te,
+						categoryPercentage: ne
+					} : {}
+				};
+			})
+		},
+		options: {
+			responsive: !0,
+			maintainAspectRatio: !1,
+			layout: x ? { padding: { top: ee } } : void 0,
+			onHover: $.onHover,
+			onClick: $.onClick,
+			hover: b ? void 0 : {
+				mode: "nearest",
+				intersect: !0
+			},
+			interaction: c(b, {
+				mode: "nearest",
+				intersect: !0
+			}),
+			plugins: {
+				legend: { display: !1 },
+				tooltip: {
+					enabled: n(b),
+					backgroundColor: M,
+					titleColor: N,
+					bodyColor: N,
+					displayColors: !1
+				}
+			},
+			scales: Q
+		},
+		plugins: r(b, [
+			L({
+				target: y,
+				colorHostElement: a,
+				rightAxisId: q
+			}),
+			...x ? [U({
+				colorHostElement: a,
+				formatValue: S
+			})] : [],
+			...$.plugins
+		])
+	};
+}, Q = [
+	"5 неделя",
+	"6 неделя",
+	"7 неделя",
+	"8 неделя",
+	"9 неделя",
+	"10 неделя"
+], $ = [{
+	label: "Series 1",
+	points: v(Q, [
+		28,
+		34,
+		24,
+		42,
+		30,
+		36
+	])
+}, {
+	label: "Series 2",
+	points: v(Q, [
+		18,
+		22,
+		16,
+		28,
+		20,
+		24
+	])
+}], ie = { class: "s-ui-chart-bar__canvas-wrap" }, ae = /* @__PURE__ */ E({
+	__name: "SChartBar",
+	props: {
+		series: { default: () => [] },
+		mode: { default: "grouped" },
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		yMax: {},
+		yMin: {},
+		yStep: {},
+		rightYMax: {},
+		rightYStep: {},
+		mirrorYAxis: {
+			type: Boolean,
+			default: !1
+		},
+		target: {},
+		showLegend: {
+			type: Boolean,
+			default: !0
+		},
+		showValues: {
+			type: Boolean,
+			default: !1
+		},
+		formatValue: { type: Function },
+		formatYTick: { type: Function },
+		categories: { default: () => [] },
+		highlightedYTick: {},
+		legendSize: {}
+	},
+	emits: ["pointClick"],
+	setup(n, { expose: r, emit: i }) {
+		let o = i, c = A("chartRootRef"), f = A("chartCanvasRef"), p = b(() => n.loading ? $ : n.mode === "grouped" ? n.series : n.series.slice(0, 1)), h = (e, t) => {
+			let n = p.value[t], r = n?.points[e];
+			n && r && o("pointClick", e, t, r, n);
+		}, g = y("onPointClick"), v = b(() => !n.loading && n.series.length === 0 ? null : Z({
+			seriesList: p.value,
+			colorHostElement: c.value,
+			yMax: n.loading ? 50 : n.yMax,
+			yMin: n.loading ? void 0 : n.yMin,
+			yStep: n.loading ? 10 : n.yStep,
+			rightYMax: n.rightYMax,
+			rightYStep: n.rightYStep,
+			mirrorYAxis: n.mirrorYAxis,
+			target: n.loading ? void 0 : n.target,
+			skeleton: n.loading,
+			showValues: n.showValues,
+			formatValue: n.formatValue,
+			formatYTick: n.formatYTick,
+			mode: n.mode,
+			categories: n.categories,
+			highlightedYTick: n.highlightedYTick,
+			onPointClick: g() ? h : void 0
+		})), E = b(() => !n.loading && n.categories.length > 0), M = b(() => E.value ? n.categories.map((e) => ({
+			label: e.label,
+			color: d(e.color, c.value)
+		})) : _(p.value, (e, t) => m(e, c.value, t, n.loading))), N = b(() => n.loading || !n.target?.legendLabel ? [] : [{
+			label: n.target.legendLabel,
+			color: n.target.color ? d(n.target.color, c.value) : t(e.grid, c.value),
+			marker: "line"
+		}]), P = b(() => [...M.value, ...N.value]), { chartInstance: F } = a({
+			canvasRef: f,
+			config: v,
+			enabled: b(() => n.loading || n.series.length > 0)
+		}), { exportImage: I, handleLegendItemHover: L } = s({
+			chartInstance: F,
+			canvasRef: f,
+			colorHostElement: c,
+			legendDimKind: () => E.value ? "category" : "series"
+		}), R = (e) => {
+			L(e !== null && e < M.value.length ? e : null);
+		};
+		return r({ exportImage: I }), (e, t) => (O(), C("div", {
+			ref_key: "chartRootRef",
+			ref: c,
+			class: D(["s-ui-chart-bar", { "s-ui-chart-bar--skeleton": n.loading }])
+		}, [w("div", ie, [T(k(l), { loading: n.loading }, {
+			default: j(() => [w("canvas", {
+				ref_key: "chartCanvasRef",
+				ref: f,
+				class: "s-ui-chart-bar__canvas"
+			}, null, 512)]),
+			_: 1
+		}, 8, ["loading"])]), n.showLegend && P.value.length ? (O(), x(k(u), {
+			key: 0,
+			items: P.value,
+			size: n.legendSize,
+			disabled: n.loading,
+			interactive: !n.loading,
+			onItemHover: R
+		}, null, 8, [
+			"items",
+			"size",
+			"disabled",
+			"interactive"
+		])) : S("", !0)], 2));
+	}
+});
+//#endregion
+export { ae as t };

package/dist/SChartBar-BzCeNCsi.cjs

@@ -0,0 +1 @@
+const e=require("./useChartInteractivity-CaZ37kX-.cjs"),t=require("./SChartLegend-D1gPKGm0.cjs"),n=require("./resolveCssColorValue-BFMo08-w.cjs"),r=require("./buildCartesianChartScales-Dck5yBMo.cjs"),i=require("./resolveChartValueRange-DBCYLCXs.cjs"),a=require("./resolveBarStackedSeriesColor-Czkj5bJY.cjs"),o=require("./applyChartHighlightedYTick-BHVwiljn.cjs"),s=require("./splitChartAxisLabel-DAmQOJn6.cjs"),c=require("./buildChartSeriesPoints-Cqo2ed-n.cjs"),l=require("./useHasListener-BPgtbbo6.cjs");let u=require("vue");var d=1,f=[4,4],p=`500 10px var(--s-ui-font-family-label)`,m=4,h=e=>e.length>0&&new Set(e).size===1,g=({target:t,colorHostElement:r,rightAxisId:i})=>({id:`barTargetLine`,afterDatasetsDraw(a){if(!t||t.values.length===0)return;let o=t.axis===`right`?i:`y`,s=a.scales[o],c=a.scales.x;if(!s||!c)return;let{ctx:l,chartArea:u}=a,g=t.color?n.t(t.color,r):e.b(e.T.grid,r);l.save(),l.strokeStyle=g,l.lineWidth=d,l.setLineDash(t.solid?[]:f);let[_]=t.values;if(_!==void 0&&h(t.values)){let e=s.getPixelForValue(_);l.beginPath(),l.moveTo(u.left,e),l.lineTo(u.right,e),l.stroke(),t.label&&(l.setLineDash([]),l.fillStyle=g,l.font=p,l.textAlign=`left`,l.fillText(t.label,u.left,e-m))}else{let e=(u.right-u.left)/t.values.length;t.values.forEach((t,n)=>{if(t<=0)return;let r=s.getPixelForValue(t);l.beginPath(),l.moveTo(u.left+e*n,r),l.lineTo(u.left+e*(n+1),r),l.stroke()})}l.restore()}}),_=4,v=10,y=500,b=`sans-serif`,x=e=>typeof window>`u`?`${y} ${v}px ${b}`:`${y} ${v}px ${getComputedStyle(e??document.documentElement).getPropertyValue(`--s-ui-font-family-label`).trim()||b}`,S=({colorHostElement:t,formatValue:n})=>({id:`barValueLabel`,afterDatasetsDraw(r){let i=e.b(e.T.barValueLabel,t),a=e.b(e.T.barValueLabelMuted,t),{ctx:o}=r;o.save(),o.font=x(t),o.textAlign=`center`,r.data.datasets.forEach((t,s)=>{r.isDatasetVisible(s)&&r.getDatasetMeta(s).data.forEach((c,l)=>{let u=t.data[l];if(typeof u!=`number`)return;let d=u<0;o.fillStyle=e.i(r,s,l)?a:i,o.textBaseline=d?`top`:`bottom`,o.fillText(n?n(u):String(u),c.x,d?c.y+_:c.y-_)})}),o.restore()}}),C=5,w=4,T=12,E=`yRight`,D=`yMirror`,O=1.05,k=16,A=.92,j=1,M=(t,n)=>t.data.datasets.every((r,i)=>!t.isDatasetVisible(i)||e.i(t,i,n)),N=(e,t,n,r)=>i.t(e.flatMap(e=>e.points.map(e=>e.value*O)),{yMin:t,yMax:n,yStep:r}),P=({seriesList:t,colorHostElement:i,yMax:c,yMin:l,yStep:u=C,rightYMax:d,rightYStep:f=C,mirrorYAxis:p=!1,target:m,skeleton:h=!1,showValues:_=!1,formatValue:v,formatYTick:y,mode:b=`grouped`,categories:x=[],highlightedYTick:O,onPointClick:P})=>{if(t.length===0)return null;let F=t.filter(e=>e.axis!==`right`),I=t.filter(e=>e.axis===`right`),L=e.b(e.T.axisLabel,i),R=e.b(e.T.grid,i),z=e.b(e.T.tooltipBackground,i),B=e.b(e.T.tooltipText,i),V=e.b(e.T.barAxisLabelMuted,i),H=N(F,l,c,u),U=N(I,void 0,d,f),W=b===`histogram`,G=x.map(e=>n.t(e.color,i)),K=r.t({axisLabelColor:L,gridColor:R,yMin:H.min,yMax:H.max,yStep:u,xTickFontSize:T,...y?{formatYAxisTick:e=>typeof e==`number`?y(e):e}:{}}),q=O&&!h?o.t(K.y.ticks,{highlightedTick:O,yStep:u,axisLabelColor:L,colorHostElement:i}):{ticks:K.y.ticks},J=W?{...K.y,display:!1}:{...K.y,...q},Y=(e,t)=>({type:`linear`,position:`right`,min:e,max:t,border:{display:!1},grid:{drawOnChartArea:!1},...q}),X=I.length>0?{[E]:Y(U.min,U.max)}:p&&!W?{[D]:Y(H.min,H.max)}:{},Z={x:{...K.x,...W?{border:{display:!0,color:R}}:{},ticks:{...K.x.ticks,color:({chart:e,index:t})=>M(e,t)?V:L}},y:J,...X},Q=e.r({kind:`segment`,skeleton:h,colorHostElement:i,onElementIndexClick:P});return{type:`bar`,data:{labels:t[0]?.points.map(e=>s.t(e.label))??[],datasets:t.map((e,t)=>{let r=a.t(t,i,e.fillColor,h),o=e.points.map(e=>e.fillColor?n.t(e.fillColor,i):(e.category===void 0?void 0:G[e.category])??r);return{label:e.label,data:e.points.map(e=>e.value),backgroundColor:o,hoverBackgroundColor:o,borderWidth:0,hoverBorderWidth:0,borderRadius:w,yAxisID:e.axis===`right`?E:`y`,captions:e.points.map(e=>e.caption),categories:e.points.map(e=>e.category),...W?{barPercentage:A,categoryPercentage:j}:{}}})},options:{responsive:!0,maintainAspectRatio:!1,layout:_?{padding:{top:k}}:void 0,onHover:Q.onHover,onClick:Q.onClick,hover:h?void 0:{mode:`nearest`,intersect:!0},interaction:e.u(h,{mode:`nearest`,intersect:!0}),plugins:{legend:{display:!1},tooltip:{enabled:e.d(h),backgroundColor:z,titleColor:B,bodyColor:B,displayColors:!1}},scales:Z},plugins:e.f(h,[g({target:m,colorHostElement:i,rightAxisId:E}),..._?[S({colorHostElement:i,formatValue:v})]:[],...Q.plugins])}},F=[`5 неделя`,`6 неделя`,`7 неделя`,`8 неделя`,`9 неделя`,`10 неделя`],I=[{label:`Series 1`,points:c.t(F,[28,34,24,42,30,36])},{label:`Series 2`,points:c.t(F,[18,22,16,28,20,24])}],L={class:`s-ui-chart-bar__canvas-wrap`},R=(0,u.defineComponent)({__name:`SChartBar`,props:{series:{default:()=>[]},mode:{default:`grouped`},loading:{type:Boolean,default:!1},yMax:{},yMin:{},yStep:{},rightYMax:{},rightYStep:{},mirrorYAxis:{type:Boolean,default:!1},target:{},showLegend:{type:Boolean,default:!0},showValues:{type:Boolean,default:!1},formatValue:{type:Function},formatYTick:{type:Function},categories:{default:()=>[]},highlightedYTick:{},legendSize:{}},emits:[`pointClick`],setup(r,{expose:i,emit:o}){let s=o,d=(0,u.useTemplateRef)(`chartRootRef`),f=(0,u.useTemplateRef)(`chartCanvasRef`),p=(0,u.computed)(()=>r.loading?I:r.mode===`grouped`?r.series:r.series.slice(0,1)),m=(e,t)=>{let n=p.value[t],r=n?.points[e];n&&r&&s(`pointClick`,e,t,r,n)},h=l.t(`onPointClick`),g=(0,u.computed)(()=>!r.loading&&r.series.length===0?null:P({seriesList:p.value,colorHostElement:d.value,yMax:r.loading?50:r.yMax,yMin:r.loading?void 0:r.yMin,yStep:r.loading?10:r.yStep,rightYMax:r.rightYMax,rightYStep:r.rightYStep,mirrorYAxis:r.mirrorYAxis,target:r.loading?void 0:r.target,skeleton:r.loading,showValues:r.showValues,formatValue:r.formatValue,formatYTick:r.formatYTick,mode:r.mode,categories:r.categories,highlightedYTick:r.highlightedYTick,onPointClick:h()?m:void 0})),_=(0,u.computed)(()=>!r.loading&&r.categories.length>0),v=(0,u.computed)(()=>_.value?r.categories.map(e=>({label:e.label,color:n.t(e.color,d.value)})):c.n(p.value,(e,t)=>a.t(e,d.value,t,r.loading))),y=(0,u.computed)(()=>r.loading||!r.target?.legendLabel?[]:[{label:r.target.legendLabel,color:r.target.color?n.t(r.target.color,d.value):e.b(e.T.grid,d.value),marker:`line`}]),b=(0,u.computed)(()=>[...v.value,...y.value]),{chartInstance:x}=e.n({canvasRef:f,config:g,enabled:(0,u.computed)(()=>r.loading||r.series.length>0)}),{exportImage:S,handleLegendItemHover:C}=e.t({chartInstance:x,canvasRef:f,colorHostElement:d,legendDimKind:()=>_.value?`category`:`series`}),w=e=>{C(e!==null&&e<v.value.length?e:null)};return i({exportImage:S}),(n,i)=>((0,u.openBlock)(),(0,u.createElementBlock)(`div`,{ref_key:`chartRootRef`,ref:d,class:(0,u.normalizeClass)([`s-ui-chart-bar`,{"s-ui-chart-bar--skeleton":r.loading}])},[(0,u.createElementVNode)(`div`,L,[(0,u.createVNode)((0,u.unref)(e.x),{loading:r.loading},{default:(0,u.withCtx)(()=>[(0,u.createElementVNode)(`canvas`,{ref_key:`chartCanvasRef`,ref:f,class:`s-ui-chart-bar__canvas`},null,512)]),_:1},8,[`loading`])]),r.showLegend&&b.value.length?((0,u.openBlock)(),(0,u.createBlock)((0,u.unref)(t.t),{key:0,items:b.value,size:r.legendSize,disabled:r.loading,interactive:!r.loading,onItemHover:w},null,8,[`items`,`size`,`disabled`,`interactive`])):(0,u.createCommentVNode)(``,!0)],2))}});Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return R}});

package/dist/SChartBurnup-BeQWgnGT.js

@@ -0,0 +1,261 @@
+import { T as e, b as t, d as n, f as r, g as i, l as a, n as o, t as s, u as c, x as l } from "./useChartInteractivity-DygkiRA1.js";
+import { t as u } from "./SChartLegend-dDqLhvIj.js";
+import { t as d } from "./createChartCrosshairPlugin-EqMlaexu.js";
+import { t as f } from "./buildMultiLineChartScales-Di-yTvEB.js";
+import { computed as p, createElementBlock as m, createElementVNode as h, createVNode as g, defineComponent as _, normalizeClass as v, openBlock as y, unref as b, useTemplateRef as x, withCtx as S } from "vue";
+//#region src/utils/chart/burnup/createBurnupTodayLinePlugin.ts
+var C = (n, r) => ({
+	id: "sUiChartBurnupTodayLine",
+	beforeDatasetsDraw(i) {
+		if (n < 0) return;
+		let { ctx: a, chartArea: o } = i, s = i.scales.x;
+		if (!o || !s) return;
+		let c = t(e.burnupToday, r), l = s.getPixelForValue(n);
+		a.save(), a.beginPath(), a.moveTo(l, o.top), a.lineTo(l, o.bottom), a.lineWidth = 1, a.strokeStyle = c, a.stroke(), a.restore();
+	}
+}), w = 8, T = 4, E = 5, D = 12, O = 12, k = 60, A = 12, j = (e) => {
+	if (typeof window > "u") return "500 10px sans-serif";
+	let t = e ?? document.documentElement;
+	return `500 10px ${getComputedStyle(t).getPropertyValue("--s-ui-font-family-label").trim() || "sans-serif"}`;
+}, M = (e, t, n, r, i, a) => {
+	let o = Math.min(a, r / 2, i / 2);
+	e.beginPath(), e.moveTo(t + o, n), e.lineTo(t + r - o, n), e.arcTo(t + r, n, t + r, n + o, o), e.lineTo(t + r, n + i - o), e.arcTo(t + r, n + i, t + r - o, n + i, o), e.lineTo(t + o, n + i), e.arcTo(t, n + i, t, n + i - o, o), e.lineTo(t, n + o), e.arcTo(t, n, t + o, n, o), e.closePath();
+}, N = ({ tagLines: n, factDatasetIndex: r, todayIndex: i }, a) => ({
+	id: "sUiChartBurnupTag",
+	afterDatasetsDraw(o) {
+		if (i < 0 || n.length === 0) return;
+		let s = o.getDatasetMeta(r)?.data[i], { chartArea: c } = o;
+		if (!s || !c) return;
+		let l = t(e.burnupToday, a), u = t(e.burnupTagBackground, a), { ctx: d } = o;
+		d.save(), d.font = j(a), d.textAlign = "center", d.textBaseline = "middle";
+		let f = n.reduce((e, t) => Math.max(e, d.measureText(t).width), 0), p = Math.max(k, f + w * 2), m = n.length * O + T + E, h = Math.min(Math.max(s.x - p / 2, c.left), c.right - p), g = Math.max(s.y - A - m, c.top);
+		M(d, h, g, p, m, D), d.fillStyle = u, d.fill(), d.lineWidth = 1, d.strokeStyle = l, d.stroke(), d.fillStyle = l, n.forEach((e, t) => {
+			d.fillText(e, h + p / 2, g + T + O * (t + .5));
+		}), d.restore();
+	}
+}), P = (e, t) => t >= 0 && e > t, F = ({ todayIndex: e, futureLabel: t, resolveTitle: n }) => ({
+	title: (t) => {
+		let r = t[0];
+		return !r || P(r.dataIndex, e) ? "" : n?.(r.dataIndex) ?? `${r.label}`;
+	},
+	label: (n) => P(n.dataIndex, e) ? t : `${n.dataset.label ?? ""}: ${n.parsed.y ?? 0}%`
+}), I = (e) => (t) => !P(t.dataIndex, e) || t.datasetIndex === 0, L = 1, R = 1, z = 2, B = [8, 8], V = [9, 9], H = 2, U = 25, W = (e) => e.reduce((e, t, n) => t.fact === null ? e : n, -1), G = (e, t) => e.goal ?? t, K = (e, t, n) => {
+	let r = e.reduce((e, n) => Math.max(e, n.plan, n.fact ?? 0, G(n, t)), t);
+	return Math.ceil(r / n) * n;
+}, q = (e, t) => t.some((e) => e.label === "") ? {
+	...e,
+	x: {
+		...e.x,
+		ticks: {
+			...e.x.ticks,
+			autoSkip: !1,
+			maxRotation: 0
+		}
+	}
+} : e, J = ({ points: o, colorHostElement: s, goalValue: l = 100, goalLabel: u = "Цель", planLabel: p = "План", factLabel: m = "Факт", futureLabel: h = "Этот день ещё не наступил", yStep: g = U, mirrorYAxis: _ = !0, showTag: v = !0, skeleton: y = !1 }) => {
+	if (o.length === 0) return null;
+	let b = t(e.axisLabel, s), x = t(e.grid, s), S = t(e.tooltipBackground, s), w = t(e.tooltipText, s), T = t(e.skeletonSeries, s), E = y ? T : t(e.burnupGoal, s), D = y ? T : t(e.burnupPlan, s), O = y ? T : t(e.burnupFact, s), k = t(e.burnupFactFillStart, s), A = t(e.burnupFactFillEnd, s), j = W(o), M = j >= 0 ? o[j] : void 0, P = M ? [`${m.toLowerCase()} ${M.fact}%`, `${p.toLowerCase()} ${M.plan}%`] : [];
+	return {
+		type: "line",
+		data: {
+			labels: o.map((e) => e.label),
+			datasets: [
+				{
+					label: u,
+					data: o.map((e) => G(e, l)),
+					borderColor: E,
+					backgroundColor: E,
+					borderWidth: L,
+					borderDash: B,
+					fill: !1,
+					pointRadius: 0,
+					pointHoverRadius: 0,
+					tension: 0
+				},
+				{
+					label: p,
+					data: o.map((e) => e.plan),
+					borderColor: D,
+					backgroundColor: D,
+					borderWidth: R,
+					borderDash: V,
+					fill: !1,
+					pointRadius: 0,
+					pointHoverRadius: 0,
+					tension: .4
+				},
+				{
+					label: m,
+					data: o.map((e) => e.fact ?? null),
+					borderColor: O,
+					backgroundColor: y ? O : (e) => a(e, k, A),
+					borderWidth: z,
+					fill: !y,
+					spanGaps: !1,
+					pointRadius: 0,
+					pointHoverRadius: 4,
+					tension: .4
+				}
+			]
+		},
+		options: {
+			responsive: !0,
+			maintainAspectRatio: !1,
+			interaction: c(y, {
+				mode: "index",
+				intersect: !1
+			}),
+			plugins: {
+				legend: { display: !1 },
+				tooltip: {
+					enabled: n(y),
+					backgroundColor: S,
+					titleColor: w,
+					bodyColor: w,
+					displayColors: !1,
+					position: i,
+					yAlign: "bottom",
+					xAlign: "center",
+					caretPadding: 8,
+					filter: I(j),
+					callbacks: F({
+						todayIndex: j,
+						futureLabel: h,
+						resolveTitle: (e) => o[e]?.tooltipLabel
+					})
+				}
+			},
+			scales: q(f({
+				axisLabelColor: b,
+				gridColor: x,
+				yMin: 0,
+				yMax: K(o, l, g),
+				yStep: g,
+				mirrorYAxis: _,
+				formatYAxisTick: (e) => `${e}%`
+			}), o)
+		},
+		plugins: r(y, [
+			d(s),
+			C(j, s),
+			...v ? [N({
+				tagLines: P,
+				factDatasetIndex: H,
+				todayIndex: j
+			}, s)] : []
+		])
+	};
+}, Y = [
+	8,
+	15,
+	23,
+	31,
+	38,
+	46,
+	54,
+	62,
+	69,
+	77,
+	85,
+	92,
+	96,
+	100
+], X = [
+	5,
+	10,
+	16,
+	22,
+	28,
+	34,
+	40,
+	45,
+	50,
+	54,
+	57,
+	60,
+	null,
+	null
+], Z = Y.map((e, t) => ({
+	label: `Д${t + 1}`,
+	plan: e,
+	fact: X[t]
+})), Q = { class: "s-ui-chart-burnup__canvas-wrap" }, $ = /* @__PURE__ */ _({
+	__name: "SChartBurnup",
+	props: {
+		points: { default: () => [] },
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		goalValue: { default: 100 },
+		goalLabel: { default: "Цель" },
+		planLabel: { default: "План" },
+		factLabel: { default: "Факт" },
+		futureLabel: { default: "Этот день ещё не наступил" },
+		yStep: { default: 25 },
+		mirrorYAxis: {
+			type: Boolean,
+			default: !0
+		},
+		showTag: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	setup(n, { expose: r }) {
+		let i = x("chartRootRef"), a = x("chartCanvasRef"), c = p(() => n.loading ? Z : n.points), d = p(() => !n.loading && n.points.length === 0 ? null : J({
+			points: c.value,
+			colorHostElement: i.value,
+			goalValue: n.goalValue,
+			goalLabel: n.goalLabel,
+			planLabel: n.planLabel,
+			factLabel: n.factLabel,
+			futureLabel: n.futureLabel,
+			yStep: n.yStep,
+			mirrorYAxis: n.mirrorYAxis,
+			showTag: n.showTag,
+			skeleton: n.loading
+		})), f = p(() => [
+			{
+				label: n.goalLabel,
+				cssVariable: e.burnupGoal
+			},
+			{
+				label: n.planLabel,
+				cssVariable: e.burnupPlan
+			},
+			{
+				label: n.factLabel,
+				cssVariable: e.burnupFact
+			}
+		].map((r) => ({
+			label: r.label.toLowerCase(),
+			color: t(n.loading ? e.skeletonSeries : r.cssVariable, i.value)
+		}))), { chartInstance: _ } = o({
+			canvasRef: a,
+			config: d,
+			enabled: p(() => n.loading || n.points.length > 0)
+		}), { exportImage: C } = s({
+			chartInstance: _,
+			canvasRef: a,
+			colorHostElement: i
+		});
+		return r({ exportImage: C }), (e, t) => (y(), m("div", {
+			ref_key: "chartRootRef",
+			ref: i,
+			class: v(["s-ui-chart-burnup", { "s-ui-chart-burnup--skeleton": n.loading }])
+		}, [h("div", Q, [g(b(l), { loading: n.loading }, {
+			default: S(() => [h("canvas", {
+				ref_key: "chartCanvasRef",
+				ref: a,
+				class: "s-ui-chart-burnup__canvas"
+			}, null, 512)]),
+			_: 1
+		}, 8, ["loading"])]), g(b(u), {
+			items: f.value,
+			disabled: n.loading
+		}, null, 8, ["items", "disabled"])], 2));
+	}
+});
+//#endregion
+export { $ as t };

package/dist/SChartBurnup-joKIDLFb.cjs

@@ -0,0 +1 @@
+const e=require("./useChartInteractivity-CaZ37kX-.cjs"),t=require("./SChartLegend-D1gPKGm0.cjs"),n=require("./createChartCrosshairPlugin-BTPv09h4.cjs"),r=require("./buildMultiLineChartScales-lVP6h9H4.cjs");let i=require("vue");var a=(t,n)=>({id:`sUiChartBurnupTodayLine`,beforeDatasetsDraw(r){if(t<0)return;let{ctx:i,chartArea:a}=r,o=r.scales.x;if(!a||!o)return;let s=e.b(e.T.burnupToday,n),c=o.getPixelForValue(t);i.save(),i.beginPath(),i.moveTo(c,a.top),i.lineTo(c,a.bottom),i.lineWidth=1,i.strokeStyle=s,i.stroke(),i.restore()}}),o=8,s=4,c=5,l=12,u=12,d=60,f=12,p=e=>{if(typeof window>`u`)return`500 10px sans-serif`;let t=e??document.documentElement;return`500 10px ${getComputedStyle(t).getPropertyValue(`--s-ui-font-family-label`).trim()||`sans-serif`}`},m=(e,t,n,r,i,a)=>{let o=Math.min(a,r/2,i/2);e.beginPath(),e.moveTo(t+o,n),e.lineTo(t+r-o,n),e.arcTo(t+r,n,t+r,n+o,o),e.lineTo(t+r,n+i-o),e.arcTo(t+r,n+i,t+r-o,n+i,o),e.lineTo(t+o,n+i),e.arcTo(t,n+i,t,n+i-o,o),e.lineTo(t,n+o),e.arcTo(t,n,t+o,n,o),e.closePath()},h=({tagLines:t,factDatasetIndex:n,todayIndex:r},i)=>({id:`sUiChartBurnupTag`,afterDatasetsDraw(a){if(r<0||t.length===0)return;let h=a.getDatasetMeta(n)?.data[r],{chartArea:g}=a;if(!h||!g)return;let _=e.b(e.T.burnupToday,i),v=e.b(e.T.burnupTagBackground,i),{ctx:y}=a;y.save(),y.font=p(i),y.textAlign=`center`,y.textBaseline=`middle`;let b=t.reduce((e,t)=>Math.max(e,y.measureText(t).width),0),x=Math.max(d,b+o*2),S=t.length*u+s+c,C=Math.min(Math.max(h.x-x/2,g.left),g.right-x),w=Math.max(h.y-f-S,g.top);m(y,C,w,x,S,l),y.fillStyle=v,y.fill(),y.lineWidth=1,y.strokeStyle=_,y.stroke(),y.fillStyle=_,t.forEach((e,t)=>{y.fillText(e,C+x/2,w+s+u*(t+.5))}),y.restore()}}),g=(e,t)=>t>=0&&e>t,_=({todayIndex:e,futureLabel:t,resolveTitle:n})=>({title:t=>{let r=t[0];return!r||g(r.dataIndex,e)?``:n?.(r.dataIndex)??`${r.label}`},label:n=>g(n.dataIndex,e)?t:`${n.dataset.label??``}: ${n.parsed.y??0}%`}),v=e=>t=>!g(t.dataIndex,e)||t.datasetIndex===0,y=1,b=1,x=2,S=[8,8],C=[9,9],w=2,T=25,E=e=>e.reduce((e,t,n)=>t.fact===null?e:n,-1),D=(e,t)=>e.goal??t,O=(e,t,n)=>{let r=e.reduce((e,n)=>Math.max(e,n.plan,n.fact??0,D(n,t)),t);return Math.ceil(r/n)*n},k=(e,t)=>t.some(e=>e.label===``)?{...e,x:{...e.x,ticks:{...e.x.ticks,autoSkip:!1,maxRotation:0}}}:e,A=({points:t,colorHostElement:i,goalValue:o=100,goalLabel:s=`Цель`,planLabel:c=`План`,factLabel:l=`Факт`,futureLabel:u=`Этот день ещё не наступил`,yStep:d=T,mirrorYAxis:f=!0,showTag:p=!0,skeleton:m=!1})=>{if(t.length===0)return null;let g=e.b(e.T.axisLabel,i),A=e.b(e.T.grid,i),j=e.b(e.T.tooltipBackground,i),M=e.b(e.T.tooltipText,i),N=e.b(e.T.skeletonSeries,i),P=m?N:e.b(e.T.burnupGoal,i),F=m?N:e.b(e.T.burnupPlan,i),I=m?N:e.b(e.T.burnupFact,i),L=e.b(e.T.burnupFactFillStart,i),R=e.b(e.T.burnupFactFillEnd,i),z=E(t),B=z>=0?t[z]:void 0,V=B?[`${l.toLowerCase()} ${B.fact}%`,`${c.toLowerCase()} ${B.plan}%`]:[];return{type:`line`,data:{labels:t.map(e=>e.label),datasets:[{label:s,data:t.map(e=>D(e,o)),borderColor:P,backgroundColor:P,borderWidth:y,borderDash:S,fill:!1,pointRadius:0,pointHoverRadius:0,tension:0},{label:c,data:t.map(e=>e.plan),borderColor:F,backgroundColor:F,borderWidth:b,borderDash:C,fill:!1,pointRadius:0,pointHoverRadius:0,tension:.4},{label:l,data:t.map(e=>e.fact??null),borderColor:I,backgroundColor:m?I:t=>e.l(t,L,R),borderWidth:x,fill:!m,spanGaps:!1,pointRadius:0,pointHoverRadius:4,tension:.4}]},options:{responsive:!0,maintainAspectRatio:!1,interaction:e.u(m,{mode:`index`,intersect:!1}),plugins:{legend:{display:!1},tooltip:{enabled:e.d(m),backgroundColor:j,titleColor:M,bodyColor:M,displayColors:!1,position:e.g,yAlign:`bottom`,xAlign:`center`,caretPadding:8,filter:v(z),callbacks:_({todayIndex:z,futureLabel:u,resolveTitle:e=>t[e]?.tooltipLabel})}},scales:k(r.t({axisLabelColor:g,gridColor:A,yMin:0,yMax:O(t,o,d),yStep:d,mirrorYAxis:f,formatYAxisTick:e=>`${e}%`}),t)},plugins:e.f(m,[n.t(i),a(z,i),...p?[h({tagLines:V,factDatasetIndex:w,todayIndex:z},i)]:[]])}},j=[8,15,23,31,38,46,54,62,69,77,85,92,96,100],M=[5,10,16,22,28,34,40,45,50,54,57,60,null,null],N=j.map((e,t)=>({label:`Д${t+1}`,plan:e,fact:M[t]})),P={class:`s-ui-chart-burnup__canvas-wrap`},F=(0,i.defineComponent)({__name:`SChartBurnup`,props:{points:{default:()=>[]},loading:{type:Boolean,default:!1},goalValue:{default:100},goalLabel:{default:`Цель`},planLabel:{default:`План`},factLabel:{default:`Факт`},futureLabel:{default:`Этот день ещё не наступил`},yStep:{default:25},mirrorYAxis:{type:Boolean,default:!0},showTag:{type:Boolean,default:!0}},setup(n,{expose:r}){let a=(0,i.useTemplateRef)(`chartRootRef`),o=(0,i.useTemplateRef)(`chartCanvasRef`),s=(0,i.computed)(()=>n.loading?N:n.points),c=(0,i.computed)(()=>!n.loading&&n.points.length===0?null:A({points:s.value,colorHostElement:a.value,goalValue:n.goalValue,goalLabel:n.goalLabel,planLabel:n.planLabel,factLabel:n.factLabel,futureLabel:n.futureLabel,yStep:n.yStep,mirrorYAxis:n.mirrorYAxis,showTag:n.showTag,skeleton:n.loading})),l=(0,i.computed)(()=>[{label:n.goalLabel,cssVariable:e.T.burnupGoal},{label:n.planLabel,cssVariable:e.T.burnupPlan},{label:n.factLabel,cssVariable:e.T.burnupFact}].map(t=>({label:t.label.toLowerCase(),color:e.b(n.loading?e.T.skeletonSeries:t.cssVariable,a.value)}))),{chartInstance:u}=e.n({canvasRef:o,config:c,enabled:(0,i.computed)(()=>n.loading||n.points.length>0)}),{exportImage:d}=e.t({chartInstance:u,canvasRef:o,colorHostElement:a});return r({exportImage:d}),(r,s)=>((0,i.openBlock)(),(0,i.createElementBlock)(`div`,{ref_key:`chartRootRef`,ref:a,class:(0,i.normalizeClass)([`s-ui-chart-burnup`,{"s-ui-chart-burnup--skeleton":n.loading}])},[(0,i.createElementVNode)(`div`,P,[(0,i.createVNode)((0,i.unref)(e.x),{loading:n.loading},{default:(0,i.withCtx)(()=>[(0,i.createElementVNode)(`canvas`,{ref_key:`chartCanvasRef`,ref:o,class:`s-ui-chart-burnup__canvas`},null,512)]),_:1},8,[`loading`])]),(0,i.createVNode)((0,i.unref)(t.t),{items:l.value,disabled:n.loading},null,8,[`items`,`disabled`])],2))}});Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return F}});