@shtabapp/ui-kit 1.74.0 → 1.76.0

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}});

package/dist/SChartHorizontalBar-C40Yroue.js

@@ -0,0 +1,176 @@
+import { T as e, b as t, d as n, n as r, r as i, t as a, u as o, x as s } from "./useChartInteractivity-DygkiRA1.js";
+import { t as c } from "./resolveCssColorValue-DH_SEZj4.js";
+import { t as l } from "./useHasListener-RSjlUyqH.js";
+import { computed as u, createElementBlock as d, createElementVNode as f, createVNode as p, defineComponent as m, normalizeClass as h, openBlock as g, unref as _, useTemplateRef as v, withCtx as y } from "vue";
+//#region src/utils/chart/horizontalBar/buildHorizontalBarChartScales.ts
+var b = 10, x = 14, S = ({ axisLabelColor: e, categoryLabelColor: t, gridColor: n, xMin: r, xMax: i, xStep: a }) => ({
+	x: {
+		type: "linear",
+		min: r,
+		max: i,
+		border: { display: !1 },
+		grid: {
+			color: n,
+			drawTicks: !1
+		},
+		ticks: {
+			color: e,
+			stepSize: a,
+			font: {
+				size: b,
+				weight: 500
+			},
+			padding: 8
+		}
+	},
+	y: {
+		border: { display: !1 },
+		grid: { display: !1 },
+		ticks: {
+			color: t,
+			font: {
+				size: x,
+				weight: 400
+			},
+			padding: 8,
+			crossAlign: "far",
+			autoSkip: !1
+		}
+	}
+}), C = (n, r, i) => i ? t(e.barHorizontalSkeletonFill, r) : n ? c(n, r) : t(e.barHorizontalFillDefault, r), w = (e, t, n) => {
+	if (t) return t;
+	let r = 0;
+	for (let t of e) r = Math.max(r, t.value);
+	let i = Math.ceil(r / n) * n;
+	return i > 0 ? i : n * 6;
+}, T = 10, E = 0, D = 36, O = 4, k = ({ items: r, colorHostElement: a, xMax: s, xMin: c = E, xStep: l = T, skeleton: u = !1, onBarClick: d }) => {
+	if (r.length === 0) return null;
+	let f = t(e.axisLabel, a), p = t(e.grid, a), m = t(e.tooltipBackground, a), h = t(e.tooltipText, a), g = t(u ? e.barHorizontalCategoryLabelSkeleton : e.barHorizontalCategoryLabel, a), _ = w(r, s, l), v = r.map((e) => C(e.color, a, u)), y = i({
+		kind: "element",
+		skeleton: u,
+		colorHostElement: a,
+		onIndexClick: d
+	});
+	return {
+		type: "bar",
+		data: {
+			labels: r.map((e) => e.label),
+			datasets: [{
+				data: r.map((e) => e.value),
+				backgroundColor: v,
+				hoverBackgroundColor: v,
+				borderWidth: 0,
+				hoverBorderWidth: 0,
+				barThickness: D,
+				borderRadius: {
+					topRight: O,
+					bottomRight: O
+				}
+			}]
+		},
+		options: {
+			indexAxis: "y",
+			responsive: !0,
+			maintainAspectRatio: !1,
+			onHover: y.onHover,
+			onClick: y.onClick,
+			interaction: o(u, {
+				mode: "index",
+				axis: "y",
+				intersect: !1
+			}),
+			plugins: {
+				legend: { display: !1 },
+				tooltip: {
+					enabled: n(u),
+					backgroundColor: m,
+					titleColor: h,
+					bodyColor: h
+				}
+			},
+			scales: S({
+				axisLabelColor: f,
+				categoryLabelColor: g,
+				gridColor: p,
+				xMin: c,
+				xMax: _,
+				xStep: l
+			})
+		},
+		plugins: y.plugins
+	};
+}, A = (e) => k(e), j = [
+	{
+		label: "Открыта",
+		value: 48
+	},
+	{
+		label: "В процессе",
+		value: 32
+	},
+	{
+		label: "Ревью",
+		value: 53
+	},
+	{
+		label: "Готова для QA",
+		value: 18
+	},
+	{
+		label: "QA",
+		value: 25
+	},
+	{
+		label: "Готова",
+		value: 0
+	}
+], M = { class: "s-ui-chart-horizontal-bar__canvas-wrap" }, N = /* @__PURE__ */ m({
+	__name: "SChartHorizontalBar",
+	props: {
+		items: { default: () => [] },
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		xMin: {},
+		xMax: {},
+		xStep: {}
+	},
+	emits: ["barClick"],
+	setup(e, { expose: t, emit: n }) {
+		let i = n, o = v("chartRootRef"), c = v("chartCanvasRef"), m = u(() => e.loading ? j : e.items), b = (t) => {
+			let n = e.items[t];
+			n && i("barClick", t, n);
+		}, x = l("onBarClick"), { chartInstance: S } = r({
+			canvasRef: c,
+			config: u(() => !e.loading && e.items.length === 0 ? null : A({
+				items: m.value,
+				colorHostElement: o.value,
+				xMax: e.loading ? 60 : e.xMax,
+				xMin: e.loading ? 0 : e.xMin,
+				xStep: e.loading ? 10 : e.xStep,
+				skeleton: e.loading,
+				onBarClick: x() ? b : void 0
+			})),
+			enabled: u(() => e.loading || e.items.length > 0)
+		}), { exportImage: C } = a({
+			chartInstance: S,
+			canvasRef: c,
+			colorHostElement: o
+		});
+		return t({ exportImage: C }), (t, n) => (g(), d("div", {
+			ref_key: "chartRootRef",
+			ref: o,
+			class: h(["s-ui-chart-horizontal-bar", { "s-ui-chart-horizontal-bar--skeleton": e.loading }])
+		}, [f("div", M, [p(_(s), { loading: e.loading }, {
+			default: y(() => [f("canvas", {
+				ref_key: "chartCanvasRef",
+				ref: c,
+				class: "s-ui-chart-horizontal-bar__canvas"
+			}, null, 512)]),
+			_: 1
+		}, 8, ["loading"])])], 2));
+	}
+});
+//#endregion
+export { N as t };

package/dist/SChartHorizontalBar-Dwln3uuE.cjs

@@ -0,0 +1 @@
+const e=require("./useChartInteractivity-CaZ37kX-.cjs"),t=require("./resolveCssColorValue-BFMo08-w.cjs"),n=require("./useHasListener-BPgtbbo6.cjs");let r=require("vue");var i=10,a=14,o=({axisLabelColor:e,categoryLabelColor:t,gridColor:n,xMin:r,xMax:o,xStep:s})=>({x:{type:`linear`,min:r,max:o,border:{display:!1},grid:{color:n,drawTicks:!1},ticks:{color:e,stepSize:s,font:{size:i,weight:500},padding:8}},y:{border:{display:!1},grid:{display:!1},ticks:{color:t,font:{size:a,weight:400},padding:8,crossAlign:`far`,autoSkip:!1}}}),s=(n,r,i)=>i?e.b(e.T.barHorizontalSkeletonFill,r):n?t.t(n,r):e.b(e.T.barHorizontalFillDefault,r),c=(e,t,n)=>{if(t)return t;let r=0;for(let t of e)r=Math.max(r,t.value);let i=Math.ceil(r/n)*n;return i>0?i:n*6},l=10,u=0,d=36,f=4,p=({items:t,colorHostElement:n,xMax:r,xMin:i=u,xStep:a=l,skeleton:p=!1,onBarClick:m})=>{if(t.length===0)return null;let h=e.b(e.T.axisLabel,n),g=e.b(e.T.grid,n),_=e.b(e.T.tooltipBackground,n),v=e.b(e.T.tooltipText,n),y=e.b(p?e.T.barHorizontalCategoryLabelSkeleton:e.T.barHorizontalCategoryLabel,n),b=c(t,r,a),x=t.map(e=>s(e.color,n,p)),S=e.r({kind:`element`,skeleton:p,colorHostElement:n,onIndexClick:m});return{type:`bar`,data:{labels:t.map(e=>e.label),datasets:[{data:t.map(e=>e.value),backgroundColor:x,hoverBackgroundColor:x,borderWidth:0,hoverBorderWidth:0,barThickness:d,borderRadius:{topRight:f,bottomRight:f}}]},options:{indexAxis:`y`,responsive:!0,maintainAspectRatio:!1,onHover:S.onHover,onClick:S.onClick,interaction:e.u(p,{mode:`index`,axis:`y`,intersect:!1}),plugins:{legend:{display:!1},tooltip:{enabled:e.d(p),backgroundColor:_,titleColor:v,bodyColor:v}},scales:o({axisLabelColor:h,categoryLabelColor:y,gridColor:g,xMin:i,xMax:b,xStep:a})},plugins:S.plugins}},m=e=>p(e),h=[{label:`Открыта`,value:48},{label:`В процессе`,value:32},{label:`Ревью`,value:53},{label:`Готова для QA`,value:18},{label:`QA`,value:25},{label:`Готова`,value:0}],g={class:`s-ui-chart-horizontal-bar__canvas-wrap`},_=(0,r.defineComponent)({__name:`SChartHorizontalBar`,props:{items:{default:()=>[]},loading:{type:Boolean,default:!1},xMin:{},xMax:{},xStep:{}},emits:[`barClick`],setup(t,{expose:i,emit:a}){let o=a,s=(0,r.useTemplateRef)(`chartRootRef`),c=(0,r.useTemplateRef)(`chartCanvasRef`),l=(0,r.computed)(()=>t.loading?h:t.items),u=e=>{let n=t.items[e];n&&o(`barClick`,e,n)},d=n.t(`onBarClick`),{chartInstance:f}=e.n({canvasRef:c,config:(0,r.computed)(()=>!t.loading&&t.items.length===0?null:m({items:l.value,colorHostElement:s.value,xMax:t.loading?60:t.xMax,xMin:t.loading?0:t.xMin,xStep:t.loading?10:t.xStep,skeleton:t.loading,onBarClick:d()?u:void 0})),enabled:(0,r.computed)(()=>t.loading||t.items.length>0)}),{exportImage:p}=e.t({chartInstance:f,canvasRef:c,colorHostElement:s});return i({exportImage:p}),(n,i)=>((0,r.openBlock)(),(0,r.createElementBlock)(`div`,{ref_key:`chartRootRef`,ref:s,class:(0,r.normalizeClass)([`s-ui-chart-horizontal-bar`,{"s-ui-chart-horizontal-bar--skeleton":t.loading}])},[(0,r.createElementVNode)(`div`,g,[(0,r.createVNode)((0,r.unref)(e.x),{loading:t.loading},{default:(0,r.withCtx)(()=>[(0,r.createElementVNode)(`canvas`,{ref_key:`chartCanvasRef`,ref:c,class:`s-ui-chart-horizontal-bar__canvas`},null,512)]),_:1},8,[`loading`])])],2))}});Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return _}});

package/dist/SChartLegend-D1gPKGm0.cjs

@@ -0,0 +1 @@
+const e=require("./useChartInteractivity-CaZ37kX-.cjs");let t=require("vue");var n=function(e){return e.SMALL=`small`,e.MEDIUM=`medium`,e}({}),r=[`onMouseenter`],i={class:`s-ui-chart-legend__swatch-slot`,"aria-hidden":`true`},a={class:`s-ui-chart-legend__label`},o=(0,t.defineComponent)({__name:`SChartLegend`,props:{items:{},disabled:{type:Boolean,default:!1},direction:{default:`row`},interactive:{type:Boolean,default:!1},size:{default:()=>n.SMALL},selectable:{type:Boolean,default:!1},activeIndex:{default:null},activeIndexes:{default:()=>[]}},emits:[`itemHover`,`itemClick`],setup(o,{emit:s}){let c=s,l=`var(${e.T.fillMuted})`,u=(0,t.computed)(()=>o.selectable?`button`:`span`),d=(0,t.computed)(()=>[`s-ui-chart-legend`,`s-ui-chart-legend--size-${o.size}`,{"s-ui-chart-legend--disabled":o.disabled,"s-ui-chart-legend--column":o.direction===`column`,"s-ui-chart-legend--selectable":o.selectable}]),f=(0,t.computed)(()=>o.items.map((e,t)=>{let r=o.activeIndex===t||o.activeIndexes.includes(t),i=(o.activeIndex!==null||o.activeIndexes.length>0)&&!r;return{index:t,label:e.label,text:o.size===n.SMALL?`— ${e.label}`:e.label,isActive:r,classes:[`s-ui-chart-legend__entry`,{"s-ui-chart-legend__entry--active":r,"s-ui-chart-legend__entry--muted":i}],swatchClasses:[`s-ui-chart-legend__swatch`,{"s-ui-chart-legend__swatch--line":e.marker===`line`}],swatchStyle:{backgroundColor:i?l:e.color}}})),p=e=>{o.interactive&&c(`itemHover`,e)},m=e=>{o.selectable&&!o.disabled&&c(`itemClick`,e)};return(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`ul`,{class:(0,t.normalizeClass)(d.value),onMouseleave:n[0]||=e=>p(null)},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(f.value,e=>((0,t.openBlock)(),(0,t.createElementBlock)(`li`,{key:e.label,class:`s-ui-chart-legend__item`,onMouseenter:t=>p(e.index)},[((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(u.value),{class:(0,t.normalizeClass)(e.classes),type:o.selectable?`button`:void 0,disabled:o.selectable?o.disabled:void 0,"aria-pressed":o.selectable?e.isActive:void 0,onClick:t=>m(e.index)},{default:(0,t.withCtx)(()=>[(0,t.createElementVNode)(`span`,i,[(0,t.createElementVNode)(`span`,{class:(0,t.normalizeClass)(e.swatchClasses),style:(0,t.normalizeStyle)(e.swatchStyle)},null,6)]),(0,t.createElementVNode)(`span`,a,(0,t.toDisplayString)(e.text),1)]),_:2},1032,[`class`,`type`,`disabled`,`aria-pressed`,`onClick`]))],40,r))),128))],34))}});Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return n}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return o}});

package/dist/SChartLegend-dDqLhvIj.js

@@ -0,0 +1,88 @@
+import { T as e } from "./useChartInteractivity-DygkiRA1.js";
+import { Fragment as t, computed as n, createBlock as r, createElementBlock as i, createElementVNode as a, defineComponent as o, normalizeClass as s, normalizeStyle as c, openBlock as l, renderList as u, resolveDynamicComponent as d, toDisplayString as f, withCtx as p } from "vue";
+//#region src/components/SChartLegend/SChartLegend.types.ts
+var m = /* @__PURE__ */ function(e) {
+	return e.SMALL = "small", e.MEDIUM = "medium", e;
+}({}), h = ["onMouseenter"], g = {
+	class: "s-ui-chart-legend__swatch-slot",
+	"aria-hidden": "true"
+}, _ = { class: "s-ui-chart-legend__label" }, v = /* @__PURE__ */ o({
+	__name: "SChartLegend",
+	props: {
+		items: {},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		direction: { default: "row" },
+		interactive: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: () => m.SMALL },
+		selectable: {
+			type: Boolean,
+			default: !1
+		},
+		activeIndex: { default: null },
+		activeIndexes: { default: () => [] }
+	},
+	emits: ["itemHover", "itemClick"],
+	setup(o, { emit: v }) {
+		let y = v, b = `var(${e.fillMuted})`, x = n(() => o.selectable ? "button" : "span"), S = n(() => [
+			"s-ui-chart-legend",
+			`s-ui-chart-legend--size-${o.size}`,
+			{
+				"s-ui-chart-legend--disabled": o.disabled,
+				"s-ui-chart-legend--column": o.direction === "column",
+				"s-ui-chart-legend--selectable": o.selectable
+			}
+		]), C = n(() => o.items.map((e, t) => {
+			let n = o.activeIndex === t || o.activeIndexes.includes(t), r = (o.activeIndex !== null || o.activeIndexes.length > 0) && !n;
+			return {
+				index: t,
+				label: e.label,
+				text: o.size === m.SMALL ? `— ${e.label}` : e.label,
+				isActive: n,
+				classes: ["s-ui-chart-legend__entry", {
+					"s-ui-chart-legend__entry--active": n,
+					"s-ui-chart-legend__entry--muted": r
+				}],
+				swatchClasses: ["s-ui-chart-legend__swatch", { "s-ui-chart-legend__swatch--line": e.marker === "line" }],
+				swatchStyle: { backgroundColor: r ? b : e.color }
+			};
+		})), w = (e) => {
+			o.interactive && y("itemHover", e);
+		}, T = (e) => {
+			o.selectable && !o.disabled && y("itemClick", e);
+		};
+		return (e, n) => (l(), i("ul", {
+			class: s(S.value),
+			onMouseleave: n[0] ||= (e) => w(null)
+		}, [(l(!0), i(t, null, u(C.value, (e) => (l(), i("li", {
+			key: e.label,
+			class: "s-ui-chart-legend__item",
+			onMouseenter: (t) => w(e.index)
+		}, [(l(), r(d(x.value), {
+			class: s(e.classes),
+			type: o.selectable ? "button" : void 0,
+			disabled: o.selectable ? o.disabled : void 0,
+			"aria-pressed": o.selectable ? e.isActive : void 0,
+			onClick: (t) => T(e.index)
+		}, {
+			default: p(() => [a("span", g, [a("span", {
+				class: s(e.swatchClasses),
+				style: c(e.swatchStyle)
+			}, null, 6)]), a("span", _, f(e.text), 1)]),
+			_: 2
+		}, 1032, [
+			"class",
+			"type",
+			"disabled",
+			"aria-pressed",
+			"onClick"
+		]))], 40, h))), 128))], 34));
+	}
+});
+//#endregion
+export { m as n, v as t };

package/dist/{SChartLine-v0tkmnN6.js → SChartLine-BV8Ytso5.js}

@@ -1,7 +1,7 @@
-import { E as e, T as t, c as n, l as r, n as i, o as a, s as o, t as s, y as c } from "./useChartInteractivity-Cl06JL4l.js";
+import { T as e, b as t, d as n, f as r, l as i, n as a, t as o, u as s, x as c } from "./useChartInteractivity-DygkiRA1.js";
 import { t as l } from "./buildCartesianChartScales-EofFq3ry.js";
 import { t as u } from "./resolveChartValueRange-DZybnmaX.js";
-import { n as d, t as f } from "./createChartMarkersPlugin-DkXituwE.js";
+import { n as d, t as f } from "./createChartMarkersPlugin-DPvfZp_e.js";
 import { computed as p, createElementBlock as m, createElementVNode as h, createVNode as g, defineComponent as _, normalizeClass as v, normalizeStyle as y, openBlock as b, unref as x, useTemplateRef as S, withCtx as C } from "vue";
 //#region src/utils/chart/css/readCssNumber.ts
 var w = (e, t, n = 1) => {
@@ -18,18 +18,18 @@ var w = (e, t, n = 1) => {
 		yMax: n,
 		yStep: r
 	});
-}, j = ({ points: e, seriesLabel: i, colorHostElement: s, yMax: u, yMin: p, yStep: m = E, area: h = !0, zeroLine: g = !1, dangerBelowZero: _ = !1, markers: v = [], skeleton: y = !1 }) => {
-	let b = t(c.axisLabel, s), x = t(c.grid, s), S = t(y ? c.skeletonSeries : c.seriesPrimary, s), C = t(y ? c.skeletonFillStart : c.seriesFillStart, s), j = t(y ? c.skeletonFillEnd : c.seriesFillEnd, s), M = t(O, s), N = t(c.tooltipBackground, s), P = t(c.tooltipText, s), F = w(y ? c.skeletonFillOpacity : c.seriesFillOpacity, s, .8), I = A(e, p, u, m, y), L = h || y, R = _ && !y, z = (e) => a(e, C, j, F), B = R ? {
+}, j = ({ points: a, seriesLabel: o, colorHostElement: c, yMax: u, yMin: p, yStep: m = E, area: h = !0, zeroLine: g = !1, dangerBelowZero: _ = !1, markers: v = [], skeleton: y = !1 }) => {
+	let b = t(e.axisLabel, c), x = t(e.grid, c), S = t(y ? e.skeletonSeries : e.seriesPrimary, c), C = t(y ? e.skeletonFillStart : e.seriesFillStart, c), j = t(y ? e.skeletonFillEnd : e.seriesFillEnd, c), M = t(O, c), N = t(e.tooltipBackground, c), P = t(e.tooltipText, c), F = w(y ? e.skeletonFillOpacity : e.seriesFillOpacity, c, .8), I = A(a, p, u, m, y), L = h || y, R = _ && !y, z = (e) => i(e, C, j, F), B = R ? {
 		target: { value: 0 },
 		below: M
 	} : L ? "origin" : !1;
 	return {
 		type: "line",
 		data: {
-			labels: e.map((e) => e.label),
+			labels: a.map((e) => e.label),
 			datasets: [{
-				label: i,
-				data: e.map((e) => e.value),
+				label: o,
+				data: a.map((e) => e.value),
 				borderColor: S,
 				backgroundColor: L ? z : "transparent",
 				pointBackgroundColor: S,
@@ -45,7 +45,7 @@ var w = (e, t, n = 1) => {
 			responsive: !0,
 			maintainAspectRatio: !1,
 			layout: { padding: { top: v.length > 0 ? D : 0 } },
-			interaction: o(y, {
+			interaction: s(y, {
 				mode: "index",
 				intersect: !1
 			}),
@@ -68,7 +68,7 @@ var w = (e, t, n = 1) => {
 				...y ? { formatYAxisTick: k } : {}
 			})
 		},
-		plugins: r(y, [...g ? [d(s)] : [], ...v.length > 0 ? [f({ markers: v }, s)] : []])
+		plugins: r(y, [...g ? [d(c)] : [], ...v.length > 0 ? [f({ markers: v }, c)] : []])
 	};
 }, M = [
 	{
@@ -122,39 +122,39 @@ var w = (e, t, n = 1) => {
 		},
 		markers: { default: () => [] }
 	},
-	setup(t, { expose: n }) {
-		let r = S("chartRootRef"), a = S("chartCanvasRef"), o = p(() => t.loading ? M : t.points), c = p(() => {
-			if (t.height !== void 0) return { "--s-ui-chart-line-viewport-height": typeof t.height == "number" ? `${t.height}px` : t.height };
-		}), { chartInstance: l } = i({
-			canvasRef: a,
-			config: p(() => !t.loading && t.points.length === 0 ? null : j({
-				points: o.value,
-				seriesLabel: t.seriesLabel,
-				colorHostElement: r.value,
-				yMax: t.loading ? 100 : t.yMax,
-				yMin: t.loading ? 50 : t.yMin,
-				yStep: t.loading ? 10 : t.yStep,
-				area: t.area,
-				zeroLine: t.zeroLine,
-				dangerBelowZero: t.dangerBelowZero,
-				markers: t.markers,
-				skeleton: t.loading
+	setup(e, { expose: t }) {
+		let n = S("chartRootRef"), r = S("chartCanvasRef"), i = p(() => e.loading ? M : e.points), s = p(() => {
+			if (e.height !== void 0) return { "--s-ui-chart-line-viewport-height": typeof e.height == "number" ? `${e.height}px` : e.height };
+		}), { chartInstance: l } = a({
+			canvasRef: r,
+			config: p(() => !e.loading && e.points.length === 0 ? null : j({
+				points: i.value,
+				seriesLabel: e.seriesLabel,
+				colorHostElement: n.value,
+				yMax: e.loading ? 100 : e.yMax,
+				yMin: e.loading ? 50 : e.yMin,
+				yStep: e.loading ? 10 : e.yStep,
+				area: e.area,
+				zeroLine: e.zeroLine,
+				dangerBelowZero: e.dangerBelowZero,
+				markers: e.markers,
+				skeleton: e.loading
 			})),
-			enabled: p(() => t.loading || t.points.length > 0)
-		}), { exportImage: u } = s({
+			enabled: p(() => e.loading || e.points.length > 0)
+		}), { exportImage: u } = o({
 			chartInstance: l,
-			canvasRef: a,
-			colorHostElement: r
+			canvasRef: r,
+			colorHostElement: n
 		});
-		return n({ exportImage: u }), (n, i) => (b(), m("div", {
+		return t({ exportImage: u }), (t, i) => (b(), m("div", {
 			ref_key: "chartRootRef",
-			ref: r,
-			class: v(["s-ui-chart-line", { "s-ui-chart-line--skeleton": t.loading }]),
-			style: y(c.value)
-		}, [h("div", N, [g(x(e), { loading: t.loading }, {
+			ref: n,
+			class: v(["s-ui-chart-line", { "s-ui-chart-line--skeleton": e.loading }]),
+			style: y(s.value)
+		}, [h("div", N, [g(x(c), { loading: e.loading }, {
 			default: C(() => [h("canvas", {
 				ref_key: "chartCanvasRef",
-				ref: a,
+				ref: r,
 				class: "s-ui-chart-line__canvas"
 			}, null, 512)]),
 			_: 1