ioloco-charts 0.2.1 → 0.2.2

package/dist/D3/BarChart/index.js

@@ -2,7 +2,7 @@
 import{jsx as r}from"react/jsx-runtime"
 import{useRef as t,useEffect as o}from"react"
 import{max as e}from"d3-array"
-import{scaleBand as i,scaleLinear as a}from"d3-scale"
+import{scaleBand as a,scaleLinear as i}from"d3-scale"
 import{select as s}from"d3-selection"
 import"d3-transition"
 import{chartPalette as m}from"../../tokens.stylex.js"
@@ -12,19 +12,20 @@ import{renderXAxis as c,renderYAxis as d}from"../shared/chartAxisLayout/render.j
 import{chartFrameInteractionProps as l,chartPointerHandlers as f}from"../shared/chartBinding.js"
 import{bindChartPointer as p,applyPointerOpacity as u}from"../shared/chartInteraction.js"
 import{formatChartHint as j}from"../shared/chartLabels.js"
-import{sanitizeGradientKey as g,appendBarSeriesGradient as x,SHAPE_STROKE_WIDTH as y}from"../shared/chartVisualStyle.js"
+import{appendBarSeriesGradient as x,sanitizeGradientKey as y,SHAPE_STROKE_WIDTH as g}from"../shared/chartVisualStyle.js"
 import{useChartInteraction as k}from"../shared/useChartInteraction.js"
-import{innerSize as v}from"../shared/chartUtils.js"
-function $({data:$,title:b="Bar chart",description:C,height:w=320,compact:L=!1,valueLabel:B,hoverHint:F="Hover a bar for details.",onDatumClick:A}){const H=t(null),I=k(F),M=t(A)
+import{innerSize as b}from"../shared/chartUtils.js"
+function v({data:v,title:$="Bar chart",description:C,height:w=320,compact:L=!1,valueLabel:B,hoverHint:F="Hover a bar for details.",onDatumClick:A}){const H=t(null),I=k(F),M=t(A)
 return M.current=A,o(()=>{const r=H.current
 if(!r)return
-const t=r.clientWidth||640,o=L?Math.min(w,280):w,n=h(L),l=n.margin,{width:k,height:b}=v(t,o,l),C=m[0],F=`bar-gradient-${g(C)}`,A=s(r)
-A.selectAll("*").remove(),A.attr("viewBox",`0 0 ${t} ${o}`)
-const D=A.append("defs")
-x(D,F,C,L)
-const R=A.append("g").attr("transform",`translate(${l.left},${l.top})`),S=i().domain($.map(r=>r.label)).range([0,k]).padding(.25),U=a().domain([0,e($,r=>r.value)??0]).nice().range([b,0])
-c(R,S,b,n.x),d(R,U,n.y)
-const V=R.selectAll("rect").data($).join("rect").attr("x",r=>S(r.label)??0).attr("width",S.bandwidth()).attr("y",b).attr("height",0).attr("fill",`url(#${F})`).attr("stroke",C).attr("stroke-width",y).attr("stroke-opacity",.35).attr("rx",4)
-V.transition().duration(500).attr("y",r=>U(r.value)).attr("height",r=>b-U(r.value)),p(V,{keyFn:r=>r.label,hintFn:r=>j(r.label,r.value,B),...f(I),onClick:r=>M.current?.(r)})
-const q=I.registerFocusApply(()=>{u(V,r=>r.label,I.getFocusOpacity)})
-return()=>{q(),V.on("mouseenter mouseleave click",null)}},[L,$,w,I.getFocusOpacity,I.onHover,I.onHoverEnd,I.onToggleSelect,I.registerFocusApply,F,B]),r(n,{title:b,description:C,height:L?Math.min(w,280):w,compact:L,...l(I),svgRef:H})}export{$ as BarChart}
+const t=r.clientWidth||640,o=L?Math.min(w,280):w,n=h(L),l=n.margin,{width:k,height:$}=b(t,o,l),C=s(r)
+C.selectAll("*").remove(),C.attr("viewBox",`0 0 ${t} ${o}`)
+const F=C.append("defs")
+v.forEach((r,t)=>{const o=r.color??m[t%m.length]
+x(F,`bar-${y(r.label)}`,o,L)})
+const A=C.append("g").attr("transform",`translate(${l.left},${l.top})`),D=a().domain(v.map(r=>r.label)).range([0,k]).padding(.25),R=i().domain([0,e(v,r=>r.value)??0]).nice().range([$,0])
+c(A,D,$,n.x),d(A,R,n.y)
+const S=A.selectAll("rect").data(v).join("rect").attr("x",r=>D(r.label)??0).attr("width",D.bandwidth()).attr("y",$).attr("height",0).attr("fill",r=>`url(#bar-${y(r.label)})`).attr("stroke",(r,t)=>r.color??m[t%m.length]).attr("stroke-width",g).attr("stroke-opacity",.35).attr("rx",4)
+S.transition().duration(500).attr("y",r=>R(r.value)).attr("height",r=>$-R(r.value)),p(S,{keyFn:r=>r.label,hintFn:r=>j(r.label,r.value,B),...f(I),onClick:r=>M.current?.(r)})
+const U=I.registerFocusApply(()=>{u(S,r=>r.label,I.getFocusOpacity)})
+return()=>{U(),S.on("mouseenter mouseleave click",null)}},[L,v,w,I.getFocusOpacity,I.onHover,I.onHoverEnd,I.onToggleSelect,I.registerFocusApply,F,B]),r(n,{title:$,description:C,height:L?Math.min(w,280):w,compact:L,...l(I),svgRef:H})}export{v as BarChart}

package/dist/D3/BarChart/types.d.ts

@@ -1,6 +1,7 @@
 export type BarDatum = {
     label: string;
     value: number;
+    color?: string;
 };
 export type BarChartProps = {
     data: BarDatum[];

package/dist/D3/StackedBarChart/index.d.ts

@@ -1,2 +1,2 @@
 import type { StackedBarChartProps } from './types';
-export declare function StackedBarChart({ data, seriesKeys, title, description, height, compact, valueLabel, hoverHint, onSegmentClick }: Readonly<StackedBarChartProps>): import("react").JSX.Element;
+export declare function StackedBarChart({ data, seriesKeys, seriesColors, title, description, height, compact, valueLabel, hoverHint, onSegmentClick }: Readonly<StackedBarChartProps>): import("react").JSX.Element;

package/dist/D3/StackedBarChart/index.js

@@ -1,40 +1,40 @@
 "use client";
-import{jsx as t}from"react/jsx-runtime"
-import{useRef as r,useMemo as e,useEffect as o}from"react"
-import{max as s}from"d3-array"
-import{scaleBand as a,scaleLinear as i,scaleOrdinal as n}from"d3-scale"
-import{select as c}from"d3-selection"
-import{stack as m}from"d3-shape"
+import{jsx as r}from"react/jsx-runtime"
+import{useRef as e,useMemo as t,useCallback as o,useEffect as s}from"react"
+import{max as a}from"d3-array"
+import{scaleBand as i,scaleLinear as n,scaleOrdinal as c}from"d3-scale"
+import{select as m}from"d3-selection"
+import{stack as l}from"d3-shape"
 import{chartPalette as d}from"../../tokens.stylex.js"
 import{ChartFrame as h}from"../shared/ChartFrame/index.js"
-import{ChartLegend as l}from"../shared/ChartLegend/index.js"
-import{renderXAxis as f,renderYAxis as p}from"../shared/chartAxisLayout/render.js"
-import{stackedBarChartAxisLayout as g}from"../shared/chartAxisLayout/stackedBarChart.js"
-import{chartFrameInteractionProps as u,chartPointerHandlers as j}from"../shared/chartBinding.js"
-import{bindChartPointer as k,applyPointerOpacity as y}from"../shared/chartInteraction.js"
-import{formatChartHint as $}from"../shared/chartLabels.js"
-import{useChartInteraction as b}from"../shared/useChartInteraction.js"
-import{useChartLegendToggle as x}from"../shared/useChartLegendToggle.js"
-import{innerSize as v}from"../shared/chartUtils.js"
-import{appendBarSeriesGradient as C,sanitizeGradientKey as L,SHAPE_STROKE_WIDTH as w}from"../shared/chartVisualStyle.js"
-function I(t){const r=new Set
-for(const e of t)for(const t of Object.keys(e.segments))r.add(t)
-return[...r]}function S({data:S,seriesKeys:B,title:F="Stacked bar chart",description:A,height:H=320,compact:M=!1,valueLabel:T,hoverHint:K="Hover a segment for details.",onSegmentClick:O}){const R=r(null),U=b(K),V=r(O)
-V.current=O
-const q=e(()=>B??I(S),[S,B]),{hiddenIds:z,visibleIds:D,toggle:E}=x(q),G=e(()=>q.filter(t=>D.includes(t)),[q,D])
-o(()=>{const t=R.current
-if(!t||0===G.length)return
-const r=S.map(t=>({label:t.label,...t.segments})),e=t.clientWidth||640,o=M?Math.min(H,280):H,h=g(M),l=h.margin,{width:u,height:b}=v(e,o,l),x=c(t)
-x.selectAll("*").remove(),x.attr("viewBox",`0 0 ${e} ${o}`)
-const I=x.append("defs")
-q.forEach((t,r)=>{if(!G.includes(t))return
-const e=d[r%d.length]
-C(I,`stacked-${L(t)}`,e,M)})
-const B=x.append("g").attr("transform",`translate(${l.left},${l.top})`),F=a().domain(r.map(t=>t.label)).range([0,u]).padding(.25),A=m().keys(G)(r),K=i().domain([0,s(A,t=>s(t,t=>t[1])??0)??0]).nice().range([b,0]),O=n().domain(q).range(q.map((t,r)=>d[r%d.length]))
-f(B,F,b,h.x),p(B,K,h.y),B.selectAll("g.layer").data(A).join("g").attr("class","layer").selectAll("rect").data(t=>t.map(r=>({...r,key:t.key}))).join("rect").attr("x",t=>F(t.data.label)??0).attr("y",t=>K(t[1])).attr("height",t=>K(t[0])-K(t[1])).attr("width",F.bandwidth()).attr("fill",t=>`url(#stacked-${L(t.key)})`).attr("stroke",t=>O(t.key)).attr("stroke-width",w).attr("stroke-opacity",.3)
-const z=B.selectAll("g.layer rect")
-k(z,{keyFn:t=>`${t.data.label}:${t.key}`,hintFn:t=>$(`${t.data.label} · ${t.key}`,t[1]-t[0],T),...j(U),onClick:t=>V.current?.({label:t.data.label,segment:t.key,value:t[1]-t[0]})})
-const D=U.registerFocusApply(()=>{y(z,t=>`${t.data.label}:${t.key}`,U.getFocusOpacity)})
-return()=>{D(),z.on("mouseenter mouseleave click",null)}},[M,S,H,U.getFocusOpacity,U.onHover,U.onHoverEnd,U.onPointerMove,U.onToggleSelect,U.registerFocusApply,K,T,q,G])
-const J=e(()=>t(l,{ariaLabel:"Series",hiddenIds:z,onToggle:E,items:q.map((t,r)=>({id:t,label:t,color:d[r%d.length]}))}),[z,q,E])
-return t(h,{title:F,description:A,height:M?Math.min(H,280):H,compact:M,...u(U),svgRef:R,legend:J})}export{S as StackedBarChart}
+import{ChartLegend as f}from"../shared/ChartLegend/index.js"
+import{renderXAxis as p,renderYAxis as g}from"../shared/chartAxisLayout/render.js"
+import{stackedBarChartAxisLayout as u}from"../shared/chartAxisLayout/stackedBarChart.js"
+import{chartFrameInteractionProps as j,chartPointerHandlers as k}from"../shared/chartBinding.js"
+import{bindChartPointer as y,applyPointerOpacity as $}from"../shared/chartInteraction.js"
+import{formatChartHint as b}from"../shared/chartLabels.js"
+import{useChartInteraction as x}from"../shared/useChartInteraction.js"
+import{useChartLegendToggle as v}from"../shared/useChartLegendToggle.js"
+import{innerSize as C}from"../shared/chartUtils.js"
+import{appendBarSeriesGradient as L,sanitizeGradientKey as w,SHAPE_STROKE_WIDTH as I}from"../shared/chartVisualStyle.js"
+function S(r){const e=new Set
+for(const t of r)for(const r of Object.keys(t.segments))e.add(r)
+return[...e]}function B({data:B,seriesKeys:F,seriesColors:A,title:H="Stacked bar chart",description:M,height:T=320,compact:K=!1,valueLabel:O,hoverHint:R="Hover a segment for details.",onSegmentClick:U}){const V=e(null),q=x(R),z=e(U)
+z.current=U
+const D=t(()=>F??S(B),[B,F]),{hiddenIds:E,visibleIds:G,toggle:J}=v(D),N=t(()=>D.filter(r=>G.includes(r)),[D,G]),P=o((r,e)=>A?.[r]??d[e%d.length],[A])
+s(()=>{const r=V.current
+if(!r||0===N.length)return
+const e=B.map(r=>({label:r.label,...r.segments})),t=r.clientWidth||640,o=K?Math.min(T,280):T,s=u(K),d=s.margin,{width:h,height:f}=C(t,o,d),j=m(r)
+j.selectAll("*").remove(),j.attr("viewBox",`0 0 ${t} ${o}`)
+const x=j.append("defs")
+D.forEach((r,e)=>{if(!N.includes(r))return
+const t=P(r,e)
+L(x,`stacked-${w(r)}`,t,K)})
+const v=j.append("g").attr("transform",`translate(${d.left},${d.top})`),S=i().domain(e.map(r=>r.label)).range([0,h]).padding(.25),F=l().keys(N)(e),A=n().domain([0,a(F,r=>a(r,r=>r[1])??0)??0]).nice().range([f,0]),H=c().domain(D).range(D.map((r,e)=>P(r,e)))
+p(v,S,f,s.x),g(v,A,s.y),v.selectAll("g.layer").data(F).join("g").attr("class","layer").selectAll("rect").data(r=>r.map(e=>({...e,key:r.key}))).join("rect").attr("x",r=>S(r.data.label)??0).attr("y",r=>A(r[1])).attr("height",r=>A(r[0])-A(r[1])).attr("width",S.bandwidth()).attr("fill",r=>`url(#stacked-${w(r.key)})`).attr("stroke",r=>H(r.key)).attr("stroke-width",I).attr("stroke-opacity",.3)
+const M=v.selectAll("g.layer rect")
+y(M,{keyFn:r=>`${r.data.label}:${r.key}`,hintFn:r=>b(`${r.data.label} · ${r.key}`,r[1]-r[0],O),...k(q),onClick:r=>z.current?.({label:r.data.label,segment:r.key,value:r[1]-r[0]})})
+const R=q.registerFocusApply(()=>{$(M,r=>`${r.data.label}:${r.key}`,q.getFocusOpacity)})
+return()=>{R(),M.on("mouseenter mouseleave click",null)}},[P,K,B,T,q.getFocusOpacity,q.onHover,q.onHoverEnd,q.onPointerMove,q.onToggleSelect,q.registerFocusApply,R,O,D,A,N])
+const Q=t(()=>r(f,{ariaLabel:"Series",hiddenIds:E,onToggle:J,items:D.map((r,e)=>({id:r,label:r,color:P(r,e)}))}),[P,E,D,J])
+return r(h,{title:H,description:M,height:K?Math.min(T,280):T,compact:K,...j(q),svgRef:V,legend:Q})}export{B as StackedBarChart}

package/dist/D3/StackedBarChart/types.d.ts

@@ -5,6 +5,8 @@ export type StackedBarRow = {
 export type StackedBarChartProps = {
     data: StackedBarRow[];
     seriesKeys?: string[];
+    /** Optional color per series key; falls back to the default chart palette. */
+    seriesColors?: Record<string, string>;
     title?: string;
     description?: string;
     height?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ioloco-charts",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Stylex D3 chart components for React",
   "author": {
     "name": "Besjan Sejrani"