Junipero Charts 📊
This release adds a new @junipero/react-d3-plugin package that brings beautiful and easy D3 Charts to Junipero:
yarn add @junipero/react-d3-plugin d3
<Chart
width={1000}
height={500}
axis={[{
type: d3.axisBottom,
scale: d3.scaleBand,
data: [
{ date: new Date('2020-01-01'), free: 37, premium: 63 },
{ date: new Date('2020-01-02'), free: 50, premium: 50 },
{ date: new Date('2020-01-03'), free: 56, premium: 44 },
],
bandDomainKey: 'date',
stackKeys: ['premium', 'free'],
parseTitle: d => d.toLocaleDateString(),
ticks: null,
}, {
type: d3.axisLeft,
scale: d3.scaleLinear,
grid: true,
min: 0,
max: 100,
}]}
style={{ paddingRight: 50 }}
linearDomainMaxMargin={1}
>
<Bar
xAxisIndex={0}
yAxisIndex={1}
tooltip={({ xIndex }) => (
<div>
<div>{ barAxis[0].data[xIndex]?.date?.toISOString() }</div>
<div>Free: { barAxis[0].data[xIndex]?.free }</div>
<div>Premium: { barAxis[0].data[xIndex]?.premium }</div>
</div>
)}
/>
</Chart>
3.2.1 (2023-08-04)
Bug Fixes
3.2.0 (2023-07-24)
Bug Fixes
- also get chart size using computed styles if needed (caf9671)
- chart not going to max (a1c14ed)
- deps: update dependency @floating-ui/react to v0.24.5 (256dc5d)
- deps: update dependency @floating-ui/react to v0.24.6 (c91321a)
- deps: update dependency @floating-ui/react to v0.24.7 (cefa537)
- deps: update dependency @floating-ui/react to v0.24.8 (6ad0937)
- deps: update dependency core-js to v3.31.1 (f1e4530)
- only try to render existing axis (f9c7c9d)
- pass data to findSelectionIndex (a6c6d0c)
- props & classes naming and various types (f18acc1)
- update tooltip on marker position change (696865e)
- various chart layout issues (ef53818)
- various layout issues (c4a4369)
- wrong chart line type (c4981a8)