Skip to content

Commit

Permalink
feat: support 0 set chart and 0 cs chart
Browse files Browse the repository at this point in the history 
closes #107
  • Loading branch information
@sgratzl
sgratzl committed Apr 9, 2022
1 parent 3d69b70 commit 54a7c75
Show file tree
Hide file tree
Showing 3 changed files with 151 additions and 139 deletions.
56 changes: 30 additions & 26 deletions packages/react/src/components/CombinationChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,32 +68,36 @@ const CombinationChart = /*!#__PURE__*/ React.memo(function CombinationChart<T>(
height={size.sets.h + size.cs.h + size.cs.before + size.cs.after}
className={`hoverBar-${style.id}`}
/>
{yValues.map((y, i) => {
const offset = i > 0 ? Math.floor(data.cs.bandWidth * OVERFLOW_PADDING_FACTOR[i - 1]) : 0;
return (
<rect
key={i}
x={offset}
y={y}
height={size.cs.h - y}
width={data.cs.bandWidth - offset * 2}
className={clsx(
`fillPrimary-${style.id}`,
i < yValues.length - 1 && `fillOverflow${yValues.length - 1 - i}-${style.id}`,
style.classNames.bar
)}
style={mergeColor(style.styles.bar, d.color)}
/>
);
})}
<text
y={yValues[0] - style.barLabelOffset}
x={data.cs.bandWidth / 2}
style={style.styles.barLabel}
className={clsx(`cBarTextStyle-${style.id}`, style.classNames.barLabel)}
>
{data.cs.format(d.cardinality)}
</text>
{size.cs.h > 0 && (
<>
{yValues.map((y, i) => {
const offset = i > 0 ? Math.floor(data.cs.bandWidth * OVERFLOW_PADDING_FACTOR[i - 1]) : 0;
return (
<rect
key={i}
x={offset}
y={y}
height={size.cs.h - y}
width={data.cs.bandWidth - offset * 2}
className={clsx(
`fillPrimary-${style.id}`,
i < yValues.length - 1 && `fillOverflow${yValues.length - 1 - i}-${style.id}`,
style.classNames.bar
)}
style={mergeColor(style.styles.bar, d.color)}
/>
);
})}
<text
y={yValues[0] - style.barLabelOffset}
x={data.cs.bandWidth / 2}
style={style.styles.barLabel}
className={clsx(`cBarTextStyle-${style.id}`, style.classNames.barLabel)}
>
{data.cs.format(d.cardinality)}
</text>
</>
)}
<text
y={-style.barLabelOffset - size.cs.before}
x={data.cs.bandWidth / 2}
Expand Down
58 changes: 31 additions & 27 deletions packages/react/src/components/SetChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,33 +74,37 @@ const SetChart = /*!#__PURE__*/ React.memo(function SetChart<T>({
className={`fillAlternating-${style.id}`}
/>
)}
{xValues.map((x, i) => {
const offset = i > 0 ? Math.floor(data.sets.bandWidth * OVERFLOW_PADDING_FACTOR[i - 1]) : 0;
return (
<rect
key={i}
x={x}
y={offset}
width={size.sets.w - x}
height={data.sets.bandWidth - offset * 2}
className={clsx(
`fillPrimary-${style.id}`,
i < xValues.length - 1 && `fillOverflow${xValues.length - 1 - i}-${style.id}`,
style.classNames.bar
)}
style={mergeColor(style.styles.bar, d.color)}
/>
);
})}
<text
x={xValues[0]}
dx={-style.barLabelOffset}
y={data.sets.bandWidth / 2}
style={style.styles.barLabel}
className={clsx(`sBarTextStyle-${style.id}`, style.classNames.barLabel)}
>
{data.sets.format(d.cardinality)}
</text>
{size.sets.w > 0 && (
<>
{xValues.map((x, i) => {
const offset = i > 0 ? Math.floor(data.sets.bandWidth * OVERFLOW_PADDING_FACTOR[i - 1]) : 0;
return (
<rect
key={i}
x={x}
y={offset}
width={size.sets.w - x}
height={data.sets.bandWidth - offset * 2}
className={clsx(
`fillPrimary-${style.id}`,
i < xValues.length - 1 && `fillOverflow${xValues.length - 1 - i}-${style.id}`,
style.classNames.bar
)}
style={mergeColor(style.styles.bar, d.color)}
/>
);
})}
<text
x={xValues[0]}
dx={-style.barLabelOffset}
y={data.sets.bandWidth / 2}
style={style.styles.barLabel}
className={clsx(`sBarTextStyle-${style.id}`, style.classNames.barLabel)}
>
{data.sets.format(d.cardinality)}
</text>
</>
)}
<text
x={size.sets.w + anchorOffset}
y={data.sets.bandWidth / 2}
Expand Down
176 changes: 90 additions & 86 deletions packages/react/src/components/UpSetAxis.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,92 +28,96 @@ const UpSetAxis = /*!#__PURE__*/ React.memo(function UpSetAxis<T>({ size, style,
return (
<g>
<UpSetTitle style={style} width={size.cs.x - csNameOffset - 20} />
<g transform={`translate(${size.cs.x},${size.cs.y})`} data-upset="csaxis">
<Axis scale={data.cs.y} orient="left" size={size.cs.h} start={size.cs.h - data.cs.yAxisWidth} style={style} />
<line x1={0} x2={size.cs.w} y1={size.cs.h + 1} y2={size.cs.h + 1} className={`axisLine-${style.id}`} />
<text
className={clsx(`cChartTextStyle-${style.id}`, style.classNames.chartLabel)}
style={style.styles.chartLabel}
transform={`translate(${-csNameOffset}, ${size.cs.h / 2})rotate(-90)`}
>
{style.cs.name}
</text>
{size.cs.addons.map((addon) => {
const pos = combinationPosGen(addon);
const title = (
<text
key={addon.name}
className={clsx(`cChartTextStyle-${style.id}`, style.classNames.chartLabel)}
style={style.styles.chartLabel}
transform={`translate(${-csNameOffset}, ${pos + addon.size / 2})rotate(-90)`}
>
{addon.name}
</text>
);
if (!addon.scale) {
return title;
}
return (
<React.Fragment key={addon.name}>
<Axis
scale={addon.scale}
orient="left"
size={addon.size}
start={0}
style={style}
transform={`translate(0,${pos})`}
/>
{title}
</React.Fragment>
);
})}
</g>
<g transform={`translate(${size.sets.x},${size.sets.y})`} data-upset="setaxis">
<Axis
scale={data.sets.x}
orient="bottom"
size={size.sets.w}
start={size.sets.w - data.sets.xAxisWidth}
transform={`translate(0, ${size.sets.h})`}
style={style}
/>
<text
className={clsx(`sChartTextStyle-${style.id}`, style.classNames.chartLabel)}
style={style.styles.chartLabel}
transform={`translate(${size.sets.w / 2}, ${size.sets.h + setNameOffset})`}
>
{style.sets.name}
</text>
{size.sets.addons.map((addon) => {
const pos = setPosGen(addon);
const title = (
<text
key={addon.name}
className={clsx(`sChartTextStyle-${style.id}`, style.classNames.chartLabel)}
style={style.styles.chartLabel}
transform={`translate(${pos + addon.size / 2}, ${size.sets.h + setNameOffset})`}
>
{addon.name}
</text>
);
if (!addon.scale) {
return title;
}
return (
<React.Fragment key={addon.name}>
<Axis
scale={addon.scale}
orient="bottom"
size={addon.size}
start={0}
transform={`translate(${pos}, ${size.sets.h})`}
style={style}
/>
{title}
</React.Fragment>
);
})}
</g>
{size.cs.h > 0 && (
<g transform={`translate(${size.cs.x},${size.cs.y})`} data-upset="csaxis">
<Axis scale={data.cs.y} orient="left" size={size.cs.h} start={size.cs.h - data.cs.yAxisWidth} style={style} />
<line x1={0} x2={size.cs.w} y1={size.cs.h + 1} y2={size.cs.h + 1} className={`axisLine-${style.id}`} />
<text
className={clsx(`cChartTextStyle-${style.id}`, style.classNames.chartLabel)}
style={style.styles.chartLabel}
transform={`translate(${-csNameOffset}, ${size.cs.h / 2})rotate(-90)`}
>
{style.cs.name}
</text>
{size.cs.addons.map((addon) => {
const pos = combinationPosGen(addon);
const title = (
<text
key={addon.name}
className={clsx(`cChartTextStyle-${style.id}`, style.classNames.chartLabel)}
style={style.styles.chartLabel}
transform={`translate(${-csNameOffset}, ${pos + addon.size / 2})rotate(-90)`}
>
{addon.name}
</text>
);
if (!addon.scale) {
return title;
}
return (
<React.Fragment key={addon.name}>
<Axis
scale={addon.scale}
orient="left"
size={addon.size}
start={0}
style={style}
transform={`translate(0,${pos})`}
/>
{title}
</React.Fragment>
);
})}
</g>
)}
{size.sets.w > 0 && (
<g transform={`translate(${size.sets.x},${size.sets.y})`} data-upset="setaxis">
<Axis
scale={data.sets.x}
orient="bottom"
size={size.sets.w}
start={size.sets.w - data.sets.xAxisWidth}
transform={`translate(0, ${size.sets.h})`}
style={style}
/>
<text
className={clsx(`sChartTextStyle-${style.id}`, style.classNames.chartLabel)}
style={style.styles.chartLabel}
transform={`translate(${size.sets.w / 2}, ${size.sets.h + setNameOffset})`}
>
{style.sets.name}
</text>
{size.sets.addons.map((addon) => {
const pos = setPosGen(addon);
const title = (
<text
key={addon.name}
className={clsx(`sChartTextStyle-${style.id}`, style.classNames.chartLabel)}
style={style.styles.chartLabel}
transform={`translate(${pos + addon.size / 2}, ${size.sets.h + setNameOffset})`}
>
{addon.name}
</text>
);
if (!addon.scale) {
return title;
}
return (
<React.Fragment key={addon.name}>
<Axis
scale={addon.scale}
orient="bottom"
size={addon.size}
start={0}
transform={`translate(${pos}, ${size.sets.h})`}
style={style}
/>
{title}
</React.Fragment>
);
})}
</g>
)}
</g>
);
});
Expand Down

0 comments on commit 54a7c75

Please sign in to comment.