Closed37
@yamada-ui/chartsの記録
108えんcursorの色指定がどうしてもclassnameではできない
use-chart-tooltip.tsx
const cursorClassName = getClassName({
fill: ["primary.400", "secondary.400"],
})(theme)
...
cursor: <Rectangle className={cursorClassName} />,
fillとstrokeだけ取り出してこんな感じにするしかない
use-chart-tooltip.ts
const tooltipVars: CSSUIProps["var"] = useMemo(
() => [
{
__prefix: "ui",
name: "cursor-fill",
token: "colors",
value: cursor.fill ?? "transparent",
},
],
[cursor.fill],
)
...
cursor: {
fill: "var(--ui-cursor-fill)",
},
どのclassnameが当たるか調べる
108えんv3.x
当たる
BarChart.stories.tsx
<Bar dataKey="pv" fill="#8884d8" background={{ className: 'background-test', fill: '#eee' }} />
当たらない
BarChart.stories.tsx
<Bar
dataKey="pv"
fill="#8884d8"
activeBar={<Rectangle fill="pink" stroke="blue" className="activebar-test" />}
/>
BarChart.stories.tsx
<Tooltip cursor={{ className: 'cursor-test' }} />
v2.xも変わりなし
108えんcursorはこれでもいいのでは？
BarChart.tsx
const CustomCursor: React.FunctionComponent<any> = (props: any) => {
const { x, y, width, height, fill, payloadIndex } = props;
return (
<Rectangle x={x} y={y} fill={fill} width={width} height={height} onMouseEnter={() => console.log(payloadIndex)} />
);
};
ここまでやってもcursorにclassNameは当たらなかった
export const Simple = {
render: () => {
const CustomCursor: React.FunctionComponent<any> = (props: any) => {
const { x, y, width, height, fill, payloadIndex } = props;
return (
<div className="cursor-classname-test">
<Rectangle
x={x}
y={y}
fill="red"
width={width}
height={height}
onMouseEnter={() => console.log(payloadIndex)}
/>
</div>
);
};
return (
<ResponsiveContainer width="100%" height="100%">
<BarChart
width={500}
height={300}
data={pageData}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip cursor={<CustomCursor />} />
<Legend />
<Bar dataKey="pv" fill="#8884d8" activeBar={<Rectangle fill="pink" stroke="blue" />} />
<Bar dataKey="uv" fill="#82ca9d" activeBar={<Rectangle fill="gold" stroke="purple" />} />
</BarChart>
</ResponsiveContainer>
);
},
};
cursorはこれで当たるようにはなる
Cursor.tsx
const cursorProps = {
stroke: '#ccc',
pointerEvents: 'none',
...offset,
...restProps,
...filterProps(element.props.cursor, false),
payload: activePayload,
payloadIndex: activeTooltipIndex,
- className: 'recharts-tooltip-cursor',
+ className: clsx('recharts-tooltip-cursor', element.props.cursor.className),
};
pathに一緒にclassNameが当たっている
BarChart.stories.tsx
activeBar={{ fill: 'pink', stroke: 'blue', className: 'activeBar-className-test' }}
backgroundPropertiesは、barPropertiesでよい気ガス
108えん円みたいな方は、className上書きしているせいで当たっていないから色が変わらない
PolarGrid.tsx
const ConcentricCircle: React.FC<ConcentricProps> = props => {
const { cx, cy, radius, index } = props;
const concentricCircleProps = {
stroke: '#ccc',
...filterProps(props, false),
fill: 'none',
};
return (
<circle
{...concentricCircleProps}
className="recharts-polar-grid-concentric-circle"
key={`circle-${index}`}
cx={cx}
cy={cy}
r={radius}
/>
);
};
// Draw concentric polygons
const ConcentricPolygon: React.FC<ConcentricProps> = props => {
const { radius, index } = props;
const concentricPolygonProps = {
stroke: '#ccc',
...filterProps(props, false),
fill: 'none',
};
return (
<path
{...concentricPolygonProps}
className="recharts-polar-grid-concentric-polygon"
key={`path-${index}`}
d={getPolygonPath(radius, props.cx, props.cy, props.polarAngles)}
/>
);
};
dotにclassNameが当たらない。
Areaと同じバグ。
Radar.tsx
static renderDotItem(option: RadarDot, props: any) {
let dotItem;
if (React.isValidElement(option)) {
dotItem = React.cloneElement(option, props);
} else if (isFunction(option)) {
dotItem = option(props);
} else {
dotItem = <Dot {...props} className="recharts-radar-dot" />;
}
return dotItem;
}
polarAngleAxisにもあたってなさそう
108えんPolarRadiusAxis.tsxもPolarAngleAxis.tsxもlabelにclassName当たってないけど当てる？そこまでしなくても感はある
PolarRadiusAxis.tsx
static renderTickItem(option: Props['tick'], props: any, value: string | number) {
let tickItem;
if (React.isValidElement(option)) {
tickItem = React.cloneElement(option, props);
} else if (isFunction(option)) {
tickItem = option(props);
} else {
tickItem = (
<Text {...props} className="recharts-polar-radius-axis-tick-value">
{value}
</Text>
);
}
return tickItem;
}
当たってないとこまとめ
- PolarGridの円みたいな方
- dot
- PolarAngleAxis全体
- PolarRadiusAxis全体
-
PolarRadiusAxisとPolarAngleAxis.tsxのラベル(tick)
108えんプルリクの下書き
Put the className as in the following example.
<RadarChart width={600} height={300} data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
<PolarGrid className="polar-grid-custom-className" />
<PolarRadiusAxis
angle={90}
type="number"
className="polar-radius-axis-custom-className"
tick={{ className: 'polar-radius-axis-tick-custom-className' }}
/>
<PolarAngleAxis
dataKey="angle"
type="number"
domain={[0, 360]}
tickCount={9}
className="polar-angle-axis-custom-className"
tick={{ className: 'polar-angle-axis-tick-custom-className' }}
/>
<Radar dataKey="value" fillOpacity={0} stroke="#000" dot={{ className: 'radar-custom-className' }} />
</RadarChart>
If it is acceptable to modify it, I will fix it.
PolarGrid.tsx
const ConcentricCircle: React.FC<ConcentricProps> = props => {
...
return (
<circle
{...concentricCircleProps}
- className="recharts-polar-grid-concentric-circle"
+ className={clsx('recharts-polar-grid-concentric-circle', props.className)}
key={`circle-${index}`}
cx={cx}
cy={cy}
r={radius}
/>
);
};
// Draw concentric polygons
const ConcentricPolygon: React.FC<ConcentricProps> = props => {
...
return (
<path
{...concentricPolygonProps}
- className="recharts-polar-grid-concentric-polygon"
+ className={clsx('recharts-polar-grid-concentric-polygon', props.className)}
key={`path-${index}`}
d={getPolygonPath(radius, props.cx, props.cy, props.polarAngles)}
/>
);
};
PolarRadiusAxis.tsx
renderTicks() {
...
return (
<Layer
- className="recharts-polar-radius-axis-tick"
+ className={clsx('recharts-polar-radius-axis-tick', get(tick, 'className'))}
key={`tick-${entry.coordinate}`}
{...adaptEventsOfChild(this.props, entry, i)}
>
{PolarRadiusAxis.renderTickItem(tick, tickProps, tickFormatter ? tickFormatter(entry.value, i) : entry.value)}
</Layer>
);
});
return <Layer className="recharts-polar-radius-axis-ticks">{items}</Layer>;
}
...
render() {
const { ticks, axisLine, tick } = this.props;
if (!ticks || !ticks.length) {
return null;
}
return (
- <Layer className="recharts-polar-radius-axis">
+ <Layer className={clsx('recharts-polar-radius-axis', this.props.className)}>
{axisLine && this.renderAxisLine()}
{tick && this.renderTicks()}
{Label.renderCallByParent(this.props, this.getViewBox())}
</Layer>
);
}
PolarAngleAxis.tsx
renderTicks() {
...
return (
<Layer
- className="recharts-polar-angle-axis-tick"
+ className={clsx('recharts-polar-angle-axis-tick', get(tick, 'className'))}
key={`tick-${entry.coordinate}`}
{...adaptEventsOfChild(this.props, entry, i)}
>
{tickLine && <line className="recharts-polar-angle-axis-tick-line" {...tickLineProps} {...lineCoord} />}
{tick &&
PolarAngleAxis.renderTickItem(tick, tickProps, tickFormatter ? tickFormatter(entry.value, i) : entry.value)}
</Layer>
);
});
return <Layer className="recharts-polar-angle-axis-ticks">{items}</Layer>;
}
...
render() {
const { ticks, radius, axisLine } = this.props;
if (radius <= 0 || !ticks || !ticks.length) {
return null;
}
return (
- <Layer className="recharts-polar-angle-axis"
+ <Layer className={clsx('recharts-polar-angle-axis', this.props.className)}>
{axisLine && this.renderAxisLine()}
{this.renderTicks()}
</Layer>
);
}
generateCategoricalChart.tsx
renderPolarAxis = (element: any, displayName: string, index: number) => {
const axisType = get(element, 'type.axisType');
const axisMap = get(this.state, `${axisType}Map`);
const axisOption: BaseAxisProps | undefined = axisMap && axisMap[element.props[`${axisType}Id`]];
return cloneElement(element, {
...axisOption,
- className: axisType,
+ className: clsx(axisType, axisOption.className),
key: element.key || `${displayName}-${index}`,
ticks: getTicksOfAxis(axisOption, true),
});
};
Radar.tsx
static renderDotItem(option: RadarDot, props: any) {
let dotItem;
if (React.isValidElement(option)) {
dotItem = React.cloneElement(option, props);
} else if (isFunction(option)) {
dotItem = option(props);
} else {
- dotItem = <Dot {...props} className="recharts-radar-dot" />;
+ dotItem = (
+ <Dot {...props} className={clsx('recharts-radar-dot', typeof option !== 'boolean' ? option.className : '')} />
+ );
}
return dotItem;
}
メモ
-
tickSizeをPopertiesに追加する必要がある
108えんAreaProp内のdataKeyはオプショナルになっていないのに、LinePropのdataKeyはオプショナルになっている。
108えんメモ
-
piechartをデフォルトにして、donutchartは上書きするようにする
-
90,-270にするのは０時始まりにしたいから
-
startangleとendangleは共通でよい
-
DonutChartProps＝PieChartProps& DonutChartOptionsにして、DonutChartOptionsの中身は消す
-
innerだけ中身戻して指定する
-
60%の初期になってJSDOもできる
-
endAngleも初期値いらない
-
numberだったらpxであることをコメントに記載する
- labellineとかinnerRadiusとか
-
labelをもう少し離して、labelLineを伸ばすのはべつチケットにする
このスクラップは1ヶ月前にクローズされました