@nubisco/ui 5.19.1 → 5.20.0

package/dist/BarChart-Bnkibwcl.js

@@ -0,0 +1,294 @@
+import { t as e } from "./_plugin-vue_export-helper-O4QQSku4.js";
+import { i as t, l as n, n as r, u as i } from "./palette-StNyj_sM.js";
+import { t as a } from "./ChartLegend-BLTbVV2E.js";
+import { i as o, r as s, t as c } from "./scales-DlFF1BRk.js";
+import { t as l } from "./useChartSize-UdZSuP3G.js";
+import { Fragment as u, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createVNode as g, defineComponent as _, getCurrentInstance as v, mergeProps as y, normalizeClass as ee, openBlock as b, ref as x, renderList as S, toDisplayString as C, unref as w, withCtx as T } from "vue";
+//#region src/components/Charts/BarChart.vue?vue&type=script&setup=true&lang.ts
+var E = [
+	"width",
+	"height",
+	"role",
+	"aria-label"
+], D = { key: 0 }, O = [
+	"x1",
+	"x2",
+	"y1",
+	"y2"
+], te = { class: "nb-chart__axis" }, ne = [
+	"x",
+	"y",
+	"text-anchor",
+	"dominant-baseline"
+], re = { class: "nb-chart__axis" }, ie = [
+	"x",
+	"y",
+	"text-anchor",
+	"dominant-baseline"
+], ae = [
+	"x1",
+	"x2",
+	"y1",
+	"y2"
+], oe = [
+	"fill",
+	"tabindex",
+	"role",
+	"aria-label",
+	"onKeydown"
+], k = { class: "nb-chart__hover-layer" }, A = [
+	"onMouseenter",
+	"onMousemove",
+	"onClick"
+], j = /* @__PURE__ */ e(/* @__PURE__ */ _({
+	__name: "BarChart",
+	props: {
+		series: { default: () => [] },
+		orientation: { default: "vertical" },
+		stacked: {
+			type: Boolean,
+			default: !1
+		},
+		valueFormatter: {},
+		title: { default: void 0 },
+		subtitle: { default: void 0 },
+		height: { default: 280 },
+		showLegend: {
+			type: Boolean,
+			default: !0
+		},
+		showTooltip: {
+			type: Boolean,
+			default: !0
+		},
+		showGrid: {
+			type: Boolean,
+			default: !0
+		},
+		colors: { default: () => r }
+	},
+	emits: ["select"],
+	setup(e, { emit: r }) {
+		let _ = e, j = r, M = x(null), N = l(M, {
+			width: 480,
+			height: 240
+		}), P = d(() => _.orientation === "horizontal"), F = d(() => _.series.map((e, n) => ({
+			name: e.name,
+			data: e.data,
+			color: e.color ?? t(n, _.colors)
+		}))), I = d(() => (_.series[0]?.data ?? []).map((e) => e.x)), L = (e, t) => F.value[t]?.data[e]?.y ?? 0, R = (e, t) => {
+			let n = L(e, t);
+			if (!_.stacked) return [0, n];
+			let r = 0;
+			for (let i = 0; i < t; i += 1) {
+				let t = L(e, i);
+				t >= 0 == n >= 0 && (r += t);
+			}
+			return [r, r + n];
+		}, z = d(() => {
+			let e = [];
+			return I.value.forEach((t, n) => {
+				F.value.forEach((t, r) => {
+					e.push(R(n, r)[1]);
+				});
+			}), e.length ? o(Math.min(0, ...e), Math.max(0, ...e), .05) : [0, 1];
+		}), B = d(() => {
+			if (!P.value) return {
+				top: 12,
+				right: 16,
+				bottom: 28,
+				left: 44
+			};
+			let e = I.value.reduce((e, t) => Math.max(e, String(t).length), 0), t = Math.max(44, Math.round(N.value.width * .4));
+			return {
+				top: 12,
+				right: 16,
+				bottom: 28,
+				left: Math.min(Math.max(44, Math.ceil(e * 6.2) + 12), t)
+			};
+		}), V = d(() => ({
+			x0: B.value.left,
+			x1: Math.max(B.value.left, N.value.width - B.value.right),
+			y0: B.value.top,
+			y1: Math.max(B.value.top, N.value.height - B.value.bottom)
+		})), H = d(() => c(I.value.map((e) => String(e)), P.value ? [V.value.y0, V.value.y1] : [V.value.x0, V.value.x1], .2)), U = d(() => s(z.value, P.value ? [V.value.x0, V.value.x1] : [V.value.y1, V.value.y0])), W = d(() => U.value.ticks(5)), G = (e) => H.value(String(I.value[e])), K = (e) => G(e) + H.value.bandwidth / 2, q = d(() => {
+			let e = F.value.length || 1;
+			return _.stacked ? H.value.bandwidth : H.value.bandwidth / e;
+		}), se = (e, t) => {
+			let [n, r] = R(e, t), i = U.value(n), a = U.value(r), o = Math.max(0, q.value - 2), s = G(e) + (_.stacked ? 0 : t * q.value), c = Math.max(0, Math.abs(a - i));
+			return P.value ? {
+				x: Math.min(i, a),
+				y: s,
+				width: c,
+				height: o
+			} : {
+				x: s,
+				y: Math.min(i, a),
+				width: o,
+				height: c
+			};
+		}, ce = (e) => {
+			let t = G(e), n = H.value.bandwidth;
+			return P.value ? {
+				x: V.value.x0,
+				y: t,
+				width: Math.max(0, V.value.x1 - V.value.x0),
+				height: n
+			} : {
+				x: t,
+				y: V.value.y0,
+				width: n,
+				height: Math.max(0, V.value.y1 - V.value.y0)
+			};
+		}, le = (e) => Math.abs(e) >= 1e3 ? `${(e / 1e3).toFixed(1)}k` : String(e), J = (e) => _.valueFormatter ? _.valueFormatter(e) : le(e), ue = v(), Y = () => !!ue?.vnode.props?.onSelect, de = (e, t) => {
+			let n = F.value[t], r = J(L(e, t));
+			return F.value.length > 1 ? `${I.value[e]}, ${n?.name}: ${r}` : `${I.value[e]}: ${r}`;
+		}, X = (e, t) => {
+			let n = F.value[t], r = n?.data[e];
+			return {
+				kind: "series",
+				x: r?.x ?? I.value[e],
+				y: r?.y ?? 0,
+				seriesName: n?.name ?? "",
+				seriesIndex: t,
+				index: e,
+				point: r ?? {
+					x: I.value[e],
+					y: 0
+				}
+			};
+		}, Z = (e) => {
+			let t = e.currentTarget.ownerSVGElement;
+			if (!t) return null;
+			let n = t.getBoundingClientRect();
+			return {
+				x: e.clientX - n.left,
+				y: e.clientY - n.top
+			};
+		}, fe = (e, t) => {
+			let n = F.value.length;
+			if (n <= 1) return 0;
+			let r = Z(e);
+			if (!r) return 0;
+			if (_.stacked) {
+				let e = P.value ? r.x : r.y;
+				for (let r = 0; r < n; r += 1) {
+					let [n, i] = R(t, r), a = U.value(n), o = U.value(i);
+					if (e >= Math.min(a, o) && e <= Math.max(a, o)) return r;
+				}
+				return n - 1;
+			}
+			let i = (P.value ? r.y : r.x) - G(t), a = Math.floor(i / (q.value || 1));
+			return Math.min(Math.max(a, 0), n - 1);
+		}, pe = (e, t) => {
+			Y() && j("select", X(t, fe(e, t)));
+		}, me = (e, t, n) => {
+			Y() && (e.key !== "Enter" && e.key !== " " || (e.preventDefault(), j("select", X(t, n))));
+		}, Q = x(null), $ = x({
+			x: 0,
+			y: 0
+		}), he = (e, t) => {
+			let n = Z(e);
+			n && ($.value = {
+				x: n.x + 12,
+				y: n.y + 12
+			}, Q.value = t);
+		}, ge = d(() => Q.value === null ? [] : F.value.map((e) => {
+			let t = e.data[Q.value];
+			return {
+				label: e.name,
+				value: t?.label ?? J(t?.y ?? 0),
+				color: e.color
+			};
+		}));
+		return (t, r) => (b(), f(i, {
+			title: e.title,
+			subtitle: e.subtitle,
+			height: e.height,
+			"show-legend": e.showLegend && F.value.length > 0
+		}, {
+			legend: T(() => [g(a, { items: F.value.map((e) => ({
+				label: e.name,
+				color: e.color
+			})) }, null, 8, ["items"])]),
+			default: T(() => [h("div", {
+				ref_key: "root",
+				ref: M,
+				class: "nb-bar-chart"
+			}, [(b(), m("svg", {
+				width: w(N).width,
+				height: w(N).height,
+				class: ee(["nb-chart__svg", { "nb-chart__svg--selectable": Y() }]),
+				role: Y() ? "group" : "img",
+				"aria-label": e.title || "Bar chart",
+				onMouseleave: r[0] ||= (e) => Q.value = null
+			}, [
+				e.showGrid && w(N).width > 0 ? (b(), m("g", D, [(b(!0), m(u, null, S(W.value, (e) => (b(), m("line", {
+					key: `grid-${e}`,
+					class: "nb-chart__gridline",
+					x1: P.value ? U.value(e) : V.value.x0,
+					x2: P.value ? U.value(e) : V.value.x1,
+					y1: P.value ? V.value.y0 : U.value(e),
+					y2: P.value ? V.value.y1 : U.value(e)
+				}, null, 8, O))), 128))])) : p("", !0),
+				h("g", te, [(b(!0), m(u, null, S(W.value, (e) => (b(), m("text", {
+					key: `vt-${e}`,
+					x: P.value ? U.value(e) : V.value.x0 - 6,
+					y: P.value ? V.value.y1 + 14 : U.value(e),
+					"text-anchor": P.value ? "middle" : "end",
+					"dominant-baseline": P.value ? "auto" : "middle"
+				}, C(J(e)), 9, ne))), 128))]),
+				h("g", re, [(b(!0), m(u, null, S(I.value, (e, t) => (b(), m("text", {
+					key: `ct-${t}`,
+					x: P.value ? V.value.x0 - 6 : K(t),
+					y: P.value ? K(t) : V.value.y1 + 14,
+					"text-anchor": P.value ? "end" : "middle",
+					"dominant-baseline": P.value ? "middle" : "auto"
+				}, C(e), 9, ie))), 128))]),
+				h("line", {
+					class: "nb-chart__axis-line",
+					x1: P.value ? U.value(0) : V.value.x0,
+					x2: P.value ? U.value(0) : V.value.x1,
+					y1: P.value ? V.value.y0 : U.value(0),
+					y2: P.value ? V.value.y1 : U.value(0)
+				}, null, 8, ae),
+				(b(!0), m(u, null, S(I.value, (e, t) => (b(), m("g", { key: `g-${t}` }, [(b(!0), m(u, null, S(F.value, (e, n) => (b(), m("rect", y({
+					key: `${t}-${n}`,
+					class: ["nb-chart__bar", { "is-dim": Q.value !== null && Q.value !== t }]
+				}, { ref_for: !0 }, se(t, n), {
+					fill: e.color,
+					tabindex: Y() ? 0 : void 0,
+					role: Y() ? "button" : void 0,
+					"aria-label": Y() ? de(t, n) : void 0,
+					onKeydown: (e) => me(e, t, n)
+				}), null, 16, oe))), 128))]))), 128)),
+				h("g", k, [(b(!0), m(u, null, S(I.value, (e, t) => (b(), m("rect", y({ key: `hover-${t}` }, { ref_for: !0 }, ce(t), {
+					fill: "transparent",
+					onMouseenter: (e) => Q.value = t,
+					onMousemove: (e) => he(e, t),
+					onClick: (e) => pe(e, t)
+				}), null, 16, A))), 128))])
+			], 42, E)), g(n, {
+				visible: e.showTooltip && Q.value !== null,
+				x: $.value.x,
+				y: $.value.y,
+				title: Q.value === null ? "" : String(I.value[Q.value]),
+				rows: ge.value
+			}, null, 8, [
+				"visible",
+				"x",
+				"y",
+				"title",
+				"rows"
+			])], 512)]),
+			_: 1
+		}, 8, [
+			"title",
+			"subtitle",
+			"height",
+			"show-legend"
+		]));
+	}
+}), [["__scopeId", "data-v-7b3d7ee4"]]);
+//#endregion
+export { j as t };

package/dist/BarChart-CjxY_3RM.cjs

@@ -0,0 +1 @@
+require(`./chunk-D-qHiVGv.cjs`);const e=require(`./_plugin-vue_export-helper-tagjRzOz.cjs`),t=require(`./palette-Cy2_8mLH.cjs`),n=require(`./ChartLegend-DGgW0yjG.cjs`),r=require(`./scales-4WxjhxBm.cjs`),i=require(`./useChartSize-C-BIN0vc.cjs`);let a=require(`vue`);var o=[`width`,`height`,`role`,`aria-label`],s={key:0},c=[`x1`,`x2`,`y1`,`y2`],l={class:`nb-chart__axis`},u=[`x`,`y`,`text-anchor`,`dominant-baseline`],d={class:`nb-chart__axis`},f=[`x`,`y`,`text-anchor`,`dominant-baseline`],p=[`x1`,`x2`,`y1`,`y2`],m=[`fill`,`tabindex`,`role`,`aria-label`,`onKeydown`],h={class:`nb-chart__hover-layer`},g=[`onMouseenter`,`onMousemove`,`onClick`],_=(0,a.defineComponent)({__name:`BarChart`,props:{series:{default:()=>[]},orientation:{default:`vertical`},stacked:{type:Boolean,default:!1},valueFormatter:{},title:{default:void 0},subtitle:{default:void 0},height:{default:280},showLegend:{type:Boolean,default:!0},showTooltip:{type:Boolean,default:!0},showGrid:{type:Boolean,default:!0},colors:{default:()=>t.n}},emits:[`select`],setup(e,{emit:_}){let v=e,y=_,b=(0,a.ref)(null),x=i.t(b,{width:480,height:240}),S=(0,a.computed)(()=>v.orientation===`horizontal`),C=(0,a.computed)(()=>v.series.map((e,n)=>({name:e.name,data:e.data,color:e.color??t.i(n,v.colors)}))),w=(0,a.computed)(()=>(v.series[0]?.data??[]).map(e=>e.x)),T=(e,t)=>C.value[t]?.data[e]?.y??0,E=(e,t)=>{let n=T(e,t);if(!v.stacked)return[0,n];let r=0;for(let i=0;i<t;i+=1){let t=T(e,i);t>=0==n>=0&&(r+=t)}return[r,r+n]},D=(0,a.computed)(()=>{let e=[];return w.value.forEach((t,n)=>{C.value.forEach((t,r)=>{e.push(E(n,r)[1])})}),e.length?r.i(Math.min(0,...e),Math.max(0,...e),.05):[0,1]}),O=(0,a.computed)(()=>{if(!S.value)return{top:12,right:16,bottom:28,left:44};let e=w.value.reduce((e,t)=>Math.max(e,String(t).length),0),t=Math.max(44,Math.round(x.value.width*.4));return{top:12,right:16,bottom:28,left:Math.min(Math.max(44,Math.ceil(e*6.2)+12),t)}}),k=(0,a.computed)(()=>({x0:O.value.left,x1:Math.max(O.value.left,x.value.width-O.value.right),y0:O.value.top,y1:Math.max(O.value.top,x.value.height-O.value.bottom)})),A=(0,a.computed)(()=>r.t(w.value.map(e=>String(e)),S.value?[k.value.y0,k.value.y1]:[k.value.x0,k.value.x1],.2)),j=(0,a.computed)(()=>r.r(D.value,S.value?[k.value.x0,k.value.x1]:[k.value.y1,k.value.y0])),M=(0,a.computed)(()=>j.value.ticks(5)),N=e=>A.value(String(w.value[e])),P=e=>N(e)+A.value.bandwidth/2,F=(0,a.computed)(()=>{let e=C.value.length||1;return v.stacked?A.value.bandwidth:A.value.bandwidth/e}),I=(e,t)=>{let[n,r]=E(e,t),i=j.value(n),a=j.value(r),o=Math.max(0,F.value-2),s=N(e)+(v.stacked?0:t*F.value),c=Math.max(0,Math.abs(a-i));return S.value?{x:Math.min(i,a),y:s,width:c,height:o}:{x:s,y:Math.min(i,a),width:o,height:c}},L=e=>{let t=N(e),n=A.value.bandwidth;return S.value?{x:k.value.x0,y:t,width:Math.max(0,k.value.x1-k.value.x0),height:n}:{x:t,y:k.value.y0,width:n,height:Math.max(0,k.value.y1-k.value.y0)}},R=e=>Math.abs(e)>=1e3?`${(e/1e3).toFixed(1)}k`:String(e),z=e=>v.valueFormatter?v.valueFormatter(e):R(e),B=(0,a.getCurrentInstance)(),V=()=>!!B?.vnode.props?.onSelect,H=(e,t)=>{let n=C.value[t],r=z(T(e,t));return C.value.length>1?`${w.value[e]}, ${n?.name}: ${r}`:`${w.value[e]}: ${r}`},U=(e,t)=>{let n=C.value[t],r=n?.data[e];return{kind:`series`,x:r?.x??w.value[e],y:r?.y??0,seriesName:n?.name??``,seriesIndex:t,index:e,point:r??{x:w.value[e],y:0}}},W=e=>{let t=e.currentTarget.ownerSVGElement;if(!t)return null;let n=t.getBoundingClientRect();return{x:e.clientX-n.left,y:e.clientY-n.top}},G=(e,t)=>{let n=C.value.length;if(n<=1)return 0;let r=W(e);if(!r)return 0;if(v.stacked){let e=S.value?r.x:r.y;for(let r=0;r<n;r+=1){let[n,i]=E(t,r),a=j.value(n),o=j.value(i);if(e>=Math.min(a,o)&&e<=Math.max(a,o))return r}return n-1}let i=(S.value?r.y:r.x)-N(t),a=Math.floor(i/(F.value||1));return Math.min(Math.max(a,0),n-1)},K=(e,t)=>{V()&&y(`select`,U(t,G(e,t)))},q=(e,t,n)=>{V()&&(e.key!==`Enter`&&e.key!==` `||(e.preventDefault(),y(`select`,U(t,n))))},J=(0,a.ref)(null),Y=(0,a.ref)({x:0,y:0}),X=(e,t)=>{let n=W(e);n&&(Y.value={x:n.x+12,y:n.y+12},J.value=t)},Z=(0,a.computed)(()=>J.value===null?[]:C.value.map(e=>{let t=e.data[J.value];return{label:e.name,value:t?.label??z(t?.y??0),color:e.color}}));return(r,i)=>((0,a.openBlock)(),(0,a.createBlock)(t.u,{title:e.title,subtitle:e.subtitle,height:e.height,"show-legend":e.showLegend&&C.value.length>0},{legend:(0,a.withCtx)(()=>[(0,a.createVNode)(n.t,{items:C.value.map(e=>({label:e.name,color:e.color}))},null,8,[`items`])]),default:(0,a.withCtx)(()=>[(0,a.createElementVNode)(`div`,{ref_key:`root`,ref:b,class:`nb-bar-chart`},[((0,a.openBlock)(),(0,a.createElementBlock)(`svg`,{width:(0,a.unref)(x).width,height:(0,a.unref)(x).height,class:(0,a.normalizeClass)([`nb-chart__svg`,{"nb-chart__svg--selectable":V()}]),role:V()?`group`:`img`,"aria-label":e.title||`Bar chart`,onMouseleave:i[0]||=e=>J.value=null},[e.showGrid&&(0,a.unref)(x).width>0?((0,a.openBlock)(),(0,a.createElementBlock)(`g`,s,[((0,a.openBlock)(!0),(0,a.createElementBlock)(a.Fragment,null,(0,a.renderList)(M.value,e=>((0,a.openBlock)(),(0,a.createElementBlock)(`line`,{key:`grid-${e}`,class:`nb-chart__gridline`,x1:S.value?j.value(e):k.value.x0,x2:S.value?j.value(e):k.value.x1,y1:S.value?k.value.y0:j.value(e),y2:S.value?k.value.y1:j.value(e)},null,8,c))),128))])):(0,a.createCommentVNode)(``,!0),(0,a.createElementVNode)(`g`,l,[((0,a.openBlock)(!0),(0,a.createElementBlock)(a.Fragment,null,(0,a.renderList)(M.value,e=>((0,a.openBlock)(),(0,a.createElementBlock)(`text`,{key:`vt-${e}`,x:S.value?j.value(e):k.value.x0-6,y:S.value?k.value.y1+14:j.value(e),"text-anchor":S.value?`middle`:`end`,"dominant-baseline":S.value?`auto`:`middle`},(0,a.toDisplayString)(z(e)),9,u))),128))]),(0,a.createElementVNode)(`g`,d,[((0,a.openBlock)(!0),(0,a.createElementBlock)(a.Fragment,null,(0,a.renderList)(w.value,(e,t)=>((0,a.openBlock)(),(0,a.createElementBlock)(`text`,{key:`ct-${t}`,x:S.value?k.value.x0-6:P(t),y:S.value?P(t):k.value.y1+14,"text-anchor":S.value?`end`:`middle`,"dominant-baseline":S.value?`middle`:`auto`},(0,a.toDisplayString)(e),9,f))),128))]),(0,a.createElementVNode)(`line`,{class:`nb-chart__axis-line`,x1:S.value?j.value(0):k.value.x0,x2:S.value?j.value(0):k.value.x1,y1:S.value?k.value.y0:j.value(0),y2:S.value?k.value.y1:j.value(0)},null,8,p),((0,a.openBlock)(!0),(0,a.createElementBlock)(a.Fragment,null,(0,a.renderList)(w.value,(e,t)=>((0,a.openBlock)(),(0,a.createElementBlock)(`g`,{key:`g-${t}`},[((0,a.openBlock)(!0),(0,a.createElementBlock)(a.Fragment,null,(0,a.renderList)(C.value,(e,n)=>((0,a.openBlock)(),(0,a.createElementBlock)(`rect`,(0,a.mergeProps)({key:`${t}-${n}`,class:[`nb-chart__bar`,{"is-dim":J.value!==null&&J.value!==t}]},{ref_for:!0},I(t,n),{fill:e.color,tabindex:V()?0:void 0,role:V()?`button`:void 0,"aria-label":V()?H(t,n):void 0,onKeydown:e=>q(e,t,n)}),null,16,m))),128))]))),128)),(0,a.createElementVNode)(`g`,h,[((0,a.openBlock)(!0),(0,a.createElementBlock)(a.Fragment,null,(0,a.renderList)(w.value,(e,t)=>((0,a.openBlock)(),(0,a.createElementBlock)(`rect`,(0,a.mergeProps)({key:`hover-${t}`},{ref_for:!0},L(t),{fill:`transparent`,onMouseenter:e=>J.value=t,onMousemove:e=>X(e,t),onClick:e=>K(e,t)}),null,16,g))),128))])],42,o)),(0,a.createVNode)(t.l,{visible:e.showTooltip&&J.value!==null,x:Y.value.x,y:Y.value.y,title:J.value===null?``:String(w.value[J.value]),rows:Z.value},null,8,[`visible`,`x`,`y`,`title`,`rows`])],512)]),_:1},8,[`title`,`subtitle`,`height`,`show-legend`]))}}),v=e.t(_,[[`__scopeId`,`data-v-7b3d7ee4`]]);Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return v}});