fix: axis title auto-visible on input + add show/hide switches
- Typing axis title text auto-sets titleVisible=true - Added switches for: show axis, show axis title, show grid lines Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
541440be8a
commit
49ed6a9bcb
|
|
@ -15,6 +15,7 @@ export default function AxisConfig({ axis }: AxisConfigProps) {
|
||||||
const { chart, setStyle } = useChartConfig();
|
const { chart, setStyle } = useChartConfig();
|
||||||
const key = axis === 'x' ? 'xAxis' : 'yAxis';
|
const key = axis === 'x' ? 'xAxis' : 'yAxis';
|
||||||
const axisStyle = chart?.style?.[key];
|
const axisStyle = chart?.style?.[key];
|
||||||
|
const label = axis === 'x' ? 'X轴' : 'Y轴';
|
||||||
|
|
||||||
const update = useCallback(
|
const update = useCallback(
|
||||||
(partial: Partial<AxisStyle>) => {
|
(partial: Partial<AxisStyle>) => {
|
||||||
|
|
@ -28,12 +29,28 @@ export default function AxisConfig({ axis }: AxisConfigProps) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Space direction="vertical" style={{ width: '100%' }} size={12}>
|
<Space direction="vertical" style={{ width: '100%' }} size={12}>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||||
|
<Text style={{ fontSize: 12 }}>显示{label}</Text>
|
||||||
|
<Switch
|
||||||
|
size="small"
|
||||||
|
checked={axisStyle.visible}
|
||||||
|
onChange={(checked) => update({ visible: checked })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||||
|
<Text style={{ fontSize: 12 }}>显示轴标题</Text>
|
||||||
|
<Switch
|
||||||
|
size="small"
|
||||||
|
checked={axisStyle.titleVisible}
|
||||||
|
onChange={(checked) => update({ titleVisible: checked })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<Text style={{ fontSize: 12 }}>轴标题</Text>
|
<Text style={{ fontSize: 12 }}>轴标题</Text>
|
||||||
<Input
|
<Input
|
||||||
value={axisStyle.titleText}
|
value={axisStyle.titleText}
|
||||||
onChange={(e) => update({ titleText: e.target.value })}
|
onChange={(e) => update({ titleText: e.target.value, titleVisible: true })}
|
||||||
placeholder={`${axis.toUpperCase()}轴标题`}
|
placeholder={`${label}标题`}
|
||||||
size="small"
|
size="small"
|
||||||
style={{ marginTop: 4 }}
|
style={{ marginTop: 4 }}
|
||||||
/>
|
/>
|
||||||
|
|
@ -56,14 +73,6 @@ export default function AxisConfig({ axis }: AxisConfigProps) {
|
||||||
style={{ marginTop: 4 }}
|
style={{ marginTop: 4 }}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
|
||||||
<Text style={{ fontSize: 12 }}>显示轴线</Text>
|
|
||||||
<Switch
|
|
||||||
size="small"
|
|
||||||
checked={axisStyle.visible}
|
|
||||||
onChange={(checked) => update({ visible: checked })}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</Space>
|
</Space>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue