Skip to content

Commit

Permalink
feat: range scale
Browse files Browse the repository at this point in the history
  • Loading branch information
@islxyqwe
islxyqwe committed Sep 27, 2023
1 parent 1b99ecd commit 357d790
Show file tree
Hide file tree
Showing 9 changed files with 394 additions and 65 deletions.
179 changes: 117 additions & 62 deletions packages/graphic-walker/src/components/visualConfig/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,70 @@
import React, { useEffect, useState, useRef, useCallback } from 'react';
import React, { useEffect, useState, useMemo, useCallback } from 'react';
import { observer } from 'mobx-react-lite';
import { runInAction, toJS } from 'mobx';
import { useTranslation } from 'react-i18next';
import { SketchPicker } from 'react-color';

import { useGlobalStore } from '../../store';
import { GLOBAL_CONFIG } from '../../config';
import { IVisualConfig } from '../../interfaces';
import { IConfigScale, IVisualConfig } from '../../interfaces';
import PrimaryButton from '../button/primary';
import DefaultButton from '../button/default';

import Modal from '../modal';
import Toggle from '../toggle';
import DropdownSelect from '../dropdownSelect';
import { ColorSchemes, extractRGBA } from './colorScheme';
import { RangeScale } from './range-scale';

const DEFAULT_COLOR_SCHEME = ['#5B8FF9', '#FF6900', '#FCB900', '#7BDCB5', '#00D084', '#8ED1FC', '#0693E3', '#ABB8C3', '#EB144C', '#F78DA7', '#9900EF'];

function useScale(minRange: number, maxRange: number, defaultMinRange?: number, defaultMaxRange?: number) {
const [enableMinDomain, setEnableMinDomain] = useState(false);
const [enableMaxDomain, setEnableMaxDomain] = useState(false);
const [enableRange, setEnableRange] = useState(false);
const [domainMin, setDomainMin] = useState(0);
const [domainMax, setDomainMax] = useState(100);
const [rangeMin, setRangeMin] = useState(defaultMinRange ?? minRange);
const [rangeMax, setRangeMax] = useState(defaultMaxRange ?? maxRange);
const setValue = useCallback((value: IConfigScale) => {
setEnableMaxDomain(value.domainMax !== undefined);
setEnableMinDomain(value.domainMin !== undefined);
setEnableRange(value.rangeMax !== undefined || value.rangeMin !== undefined);
setDomainMin(value.domainMin ?? 0);
setDomainMax(value.domainMax ?? 100);
setRangeMax(value.rangeMax ?? defaultMaxRange ?? maxRange);
setRangeMin(value.rangeMin ?? defaultMinRange ?? minRange);
}, []);

const value = useMemo(
() => ({
...(enableMaxDomain ? { domainMax } : {}),
...(enableMinDomain ? { domainMin } : {}),
...(enableRange ? { rangeMax, rangeMin } : {}),
}),
[enableMaxDomain && domainMax, enableMinDomain && domainMin, enableRange && rangeMax, enableRange && rangeMin]
);

return {
value,
setValue,
enableMaxDomain,
enableMinDomain,
enableRange,
rangeMax,
rangeMin,
domainMax,
domainMin,
setEnableMinDomain,
setEnableMaxDomain,
setEnableRange,
setDomainMin,
setDomainMax,
setRangeMin,
setRangeMax,
};
}

const VisualConfigPanel: React.FC = (props) => {
const { commonStore, vizStore } = useGlobalStore();
const { showVisualConfigPanel } = commonStore;
Expand Down Expand Up @@ -48,6 +96,8 @@ const VisualConfigPanel: React.FC = (props) => {
const [defaultColor, setDefaultColor] = useState({ r: 91, g: 143, b: 249, a: 1 });
const [displayColorPicker, setDisplayColorPicker] = useState(false);
const [colorPalette, setColorPalette] = useState('');
const opacityValue = useScale(0, 1, 0.3, 0.8);
const sizeValue = useScale(0, 100);

useEffect(() => {
setZeroScale(visualConfig.zeroScale);
Expand All @@ -61,6 +111,8 @@ const VisualConfigPanel: React.FC = (props) => {
normalizedNumberFormat: visualConfig.format.normalizedNumberFormat,
});
setColorPalette(visualConfig.colorPalette ?? '');
opacityValue.setValue(visualConfig.scale?.opacity ?? {});
sizeValue.setValue(visualConfig.scale?.size ?? {});
}, [showVisualConfigPanel]);

return (
Expand All @@ -75,76 +127,78 @@ const VisualConfigPanel: React.FC = (props) => {
setDisplayColorPicker(false);
}}
>
<div className="mb-2">
<h2 className="text-lg mb-4">Scheme</h2>
<div className="flex">
<div className="flex space-x-6">
<div>
<label className="block text-xs font-medium leading-6">Primary Color</label>
<div
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
}}
>
{coordSystem === 'generic' && (
<>
<div className="mb-2">
<h2 className="text-lg mb-4">{t('config.scheme')}</h2>
<div className="flex space-x-6">
<div>
<label className="block text-xs font-medium leading-6">{t('config.primary_color')}</label>
<div
className="w-8 h-5 border-2"
style={{ backgroundColor: `rgba(${defaultColor.r},${defaultColor.g},${defaultColor.b},${defaultColor.a})` }}
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
setDisplayColorPicker(true);
}}
></div>
<div className="absolute left-32 top-22 index-40">
{displayColorPicker && (
<SketchPicker
presetColors={DEFAULT_COLOR_SCHEME}
color={defaultColor}
onChange={(color, event) => {
setDefaultColor({
...color.rgb,
a: color.rgb.a ?? 1,
});
}}
/>
)}
>
<div
className="w-8 h-5 border-2"
style={{ backgroundColor: `rgba(${defaultColor.r},${defaultColor.g},${defaultColor.b},${defaultColor.a})` }}
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
setDisplayColorPicker(true);
}}
></div>
<div className="absolute left-32 top-22 index-40">
{displayColorPicker && (
<SketchPicker
presetColors={DEFAULT_COLOR_SCHEME}
color={defaultColor}
onChange={(color, event) => {
setDefaultColor({
...color.rgb,
a: color.rgb.a ?? 1,
});
}}
/>
)}
</div>
</div>
</div>
</div>
<div>
<label className="block text-xs font-medium leading-6">Color Palette</label>
<DropdownSelect
buttonClassName="w-48"
selectedKey={colorPalette}
onSelect={setColorPalette}
options={ColorSchemes.map((scheme) => ({
value: scheme.name,
label: (
<>
<div key={scheme.name} className="flex flex-col justify-start items-center">
<div className="font-light">{scheme.name}</div>
<div className="flex w-full">
{scheme.value.map((c, index) => {
return <div key={index} className="w-4 h-4 flex-shrink" style={{ backgroundColor: `${c}` }}></div>;
})}
<div>
<label className="block text-xs font-medium leading-6">{t('config.color_palette')}</label>
<DropdownSelect
buttonClassName="w-48"
selectedKey={colorPalette}
onSelect={setColorPalette}
options={ColorSchemes.map((scheme) => ({
value: scheme.name,
label: (
<>
<div key={scheme.name} className="flex flex-col justify-start items-center">
<div className="font-light">{scheme.name}</div>
<div className="flex w-full">
{scheme.value.map((c, index) => {
return (
<div key={index} className="w-4 h-4 flex-shrink" style={{ backgroundColor: `${c}` }}></div>
);
})}
</div>
</div>
</div>
</>
),
}))}
/>
</>
),
}))}
/>
</div>
</div>
<label className="block text-xs font-medium leading-6">{t('config.opacity')}</label>
<RangeScale {...opacityValue} text="opacity" maxRange={1} minRange={0} />
<label className="block text-xs font-medium leading-6">{t('config.size')}</label>
<RangeScale {...sizeValue} text="size" maxRange={100} minRange={0} />
</div>
</div>

{/* {ColorSchemes.map((scheme) => {
return (
);
})} */}
</div>
<hr className="my-4" />
<hr className="my-4" />
</>
)}
<h2 className="text-lg mb-4">{t('config.format')}</h2>
<p className="text-xs">
{t(`config.formatGuidesDocs`)}:{' '}
Expand Down Expand Up @@ -259,6 +313,7 @@ const VisualConfigPanel: React.FC = (props) => {
vizStore.setVisualConfig('primaryColor', `rgba(${defaultColor.r},${defaultColor.g},${defaultColor.b},${defaultColor.a})`);
vizStore.setVisualConfig('colorPalette', colorPalette);
vizStore.setVisualConfig('useSvg', svg);
vizStore.setVisualConfig('scale', { opacity: opacityValue.value, size: sizeValue.value });
commonStore.setShowVisualConfigPanel(false);
});
}}
Expand Down
Loading

0 comments on commit 357d790

Please sign in to comment.