55 lines
1.4 KiB
JavaScript
55 lines
1.4 KiB
JavaScript
import { useMemo, useState } from 'react';
|
|
import { getData, complexScales } from '../data';
|
|
import { Gantt } from '../../src/';
|
|
import { Slider } from '@svar-ui/react-core';
|
|
import './GanttSizes.css';
|
|
|
|
function GanttSizes({ skinSettings }) {
|
|
const data = useMemo(() => getData(), []);
|
|
const [cellWidth, setCellWidth] = useState(100);
|
|
const [scaleHeight, setScaleHeight] = useState(38);
|
|
const [cellHeight, setCellHeight] = useState(36);
|
|
|
|
return (
|
|
<div className="wx-MZ5YXrqJ rows">
|
|
<div className="wx-MZ5YXrqJ bar">
|
|
<Slider
|
|
label="Cell width"
|
|
value={cellWidth}
|
|
onChange={({ value }) => setCellWidth(value)}
|
|
min={20}
|
|
max={200}
|
|
/>
|
|
<Slider
|
|
label="Cell height"
|
|
value={cellHeight}
|
|
onChange={({ value }) => setCellHeight(value)}
|
|
min={20}
|
|
max={60}
|
|
/>
|
|
<Slider
|
|
label="Scale height"
|
|
value={scaleHeight}
|
|
onChange={({ value }) => setScaleHeight(value)}
|
|
min={20}
|
|
max={60}
|
|
/>
|
|
</div>
|
|
|
|
<div className="wx-MZ5YXrqJ gtcell">
|
|
<Gantt
|
|
{...skinSettings}
|
|
tasks={data.tasks}
|
|
links={data.links}
|
|
scales={complexScales}
|
|
cellWidth={cellWidth}
|
|
cellHeight={cellHeight}
|
|
scaleHeight={scaleHeight}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default GanttSizes;
|