Skip to content

Commit

Permalink
feat-colorsetting-0825-ldy (#169)
Browse files Browse the repository at this point in the history 
Co-authored-by: fengyxz <763159242@qq.com>
  • Loading branch information
@islxyqwe @fengyxz
islxyqwe and fengyxz authored Sep 26, 2023
1 parent fe62b02 commit bee41f1
Show file tree
Hide file tree
Showing 11 changed files with 331 additions and 9 deletions.
1 change: 1 addition & 0 deletions packages/graphic-walker/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@
"postcss": "^8.3.7",
"postinstall-postinstall": "^2.1.0",
"re-resizable": "^6.9.8",
"react-color": "^2.19.3",
"react-dropzone": "^14.2.3",
"react-error-boundary": "^4.0.11",
"react-i18next": "^11.18.6",
Expand Down
2 changes: 2 additions & 0 deletions packages/graphic-walker/src/components/sizeSetting.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@ const SizeSetting: React.FC<SizeSettingProps> = (props) => {
className="w-4 h-4 inline-block mr-0.5 text-gray-900"
/>
{show && (
<>
<ResizeDialog {...props}>
<div>
<XMarkIcon
Expand All @@ -112,6 +113,7 @@ const SizeSetting: React.FC<SizeSettingProps> = (props) => {
/>
</div>
</ResizeDialog>
</>
)}
</div>
);
Expand Down
97 changes: 97 additions & 0 deletions packages/graphic-walker/src/components/visualConfig/colorScheme.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
export const ColorSchemes = [
{
name: 'accent',
value: ['#7fc97f', '#beaed4', '#fdc086', '#ffff99', '#386cb0', '#f0027f', '#bf5b17', '#666666'],
},
{
name: 'category10',
value: ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf'],
},
{
name: 'category20',
value: [
'#1f77b4',
'#aec7e8',
'#ff7f0e',
'#ffbb78',
'#2ca02c',
'#98df8a',
'#d62728',
'#ff9896',
'#9467bd',
'#c5b0d5',
'#8c564b',
'#c49c94',
'#e377c2',
'#f7b6d2',
'#7f7f7f',
'#c7c7c7',
'#bcbd22',
'#dbdb8d',
'#17becf',
'#9edae5',
],
},
{
name: 'category20b',
value: [
'#393b79',
'#5254a3',
'#6b6ecf',
'#9c9ede',
'#637939',
'#8ca252',
'#b5cf6b',
'#cedb9c',
'#8c6d31',
'#bd9e39',
'#e7ba52',
'#e7cb94',
'#843c39',
'#ad494a',
'#d6616b',
'#e7969c',
'#7b4173',
'#a55194',
'#ce6dbd',
'#de9ed6',
],
},
{
name: 'category20c',
value: [
'#3182bd',
'#6baed6',
'#9ecae1',
'#c6dbef',
'#e6550d',
'#fd8d3c',
'#fdae6b',
'#fdd0a2',
'#31a354',
'#74c476',
'#a1d99b',
'#c7e9c0',
'#756bb1',
'#9e9ac8',
'#bcbddc',
'#dadaeb',
'#636363',
'#969696',
'#bdbdbd',
'#d9d9d9',
],
},
{
name: 'dark2',
value: ['#1b9e77', '#d95f02', '#7570b3', '#e7298a', '#66a61e', '#e6ab02', '#a6761d', '#666666'],
},
{
name: 'paired',
value: ['#a6cee3', '#1f78b4', '#b2df8a', '#33a02c', '#fb9a99', '#e31a1c', '#fdbf6f', '#ff7f00', '#cab2d6', '#6a3d9a', '#ffff99', '#b15928'],
},
{
name: 'pastel1',
value: ['#fbb4ae', '#b3cde3', '#ccebc5', '#decbe4', '#fed9a6', '#ffffcc', '#e5d8bd', '#fddaec', '#f2f2f2'],
},
];
86 changes: 84 additions & 2 deletions packages/graphic-walker/src/components/visualConfig/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { observer } from 'mobx-react-lite';
import React, { useEffect, useState } from 'react';
import React, { useEffect, useState, useRef } from 'react';
import { useGlobalStore } from '../../store';
import { GLOBAL_CONFIG } from '../../config';
import { TwitterPicker, BlockPicker, SketchPicker } from 'react-color';

import Modal from '../modal';
import { IVisualConfig } from '../../interfaces';
Expand All @@ -10,6 +11,7 @@ import DefaultButton from '../button/default';
import { useTranslation } from 'react-i18next';
import Toggle from '../toggle';
import { runInAction, toJS } from 'mobx';
import { ColorSchemes } from './colorScheme';

const VisualConfigPanel: React.FC = (props) => {
const { commonStore, vizStore } = useGlobalStore();
Expand Down Expand Up @@ -39,11 +41,28 @@ const VisualConfigPanel: React.FC = (props) => {
const [svg, setSvg] = useState<boolean>(visualConfig.useSvg ?? false);
const [scaleIncludeUnmatchedChoropleth, setScaleIncludeUnmatchedChoropleth] = useState<boolean>(visualConfig.scaleIncludeUnmatchedChoropleth ?? false);
const [background, setBackground] = useState<string | undefined>(visualConfig.background);
const [defaultColor, setDefaultColor] = useState({ r: 91, g: 143, b: 249, a: 1 });
const [displayColorPicker, setDisplayColorPicker] = useState(false);
const [displaySchemePicker, setDisplaySchemePicker] = useState(false);
const selectColor = useRef('rgb(91, 143, 249)');

const getRGBA = (rgba) => {
console.log(rgba);
let arr = rgba.match(/\d+/g);
console.log('arr', arr);
return {
r: arr[0],
g: arr[1],
b: arr[2],
a: arr[3],
};
};

useEffect(() => {
setZeroScale(visualConfig.zeroScale);
setBackground(visualConfig.background);
setResolve(toJS(visualConfig.resolve));
setDefaultColor(getRGBA(visualConfig.primaryColor));
setScaleIncludeUnmatchedChoropleth(visualConfig.scaleIncludeUnmatchedChoropleth ?? false);
setFormat({
numberFormat: visualConfig.format.numberFormat,
Expand All @@ -59,7 +78,69 @@ const VisualConfigPanel: React.FC = (props) => {
commonStore.setShowVisualConfigPanel(false);
}}
>
<div>
<div
onClick={() => {
setDisplayColorPicker(false);
}}
>
<div className="mb-2">
<h2 className="text-lg mb-4">Scheme</h2>
<div className="flex">
<p className="w-28">Primary Color</p>
<div
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
}}
>
<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={[
'#5B8FF9',
'#FF6900',
'#FCB900',
'#7BDCB5',
'#00D084',
'#8ED1FC',
'#0693E3',
'#ABB8C3',
'#EB144C',
'#F78DA7',
'#9900EF',
]}
color={defaultColor}
onChange={(color, event) => {
console.log(color.hex);
console.log('event', event);
setDefaultColor(color.rgb);
}}
/>
)}
</div>
</div>
</div>

{/* {ColorSchemes.map((scheme) => {
return (
<div key={scheme.name} className="flex justify-start items-center">
<div className="font-light mx-2 w-24 ">{scheme.name}</div>
{scheme.value.map((c, index) => {
return <div key={index} className="w-4 h-4" style={{ backgroundColor: `${c}` }}></div>;
})}
</div>
);
})} */}
</div>
<h2 className="text-lg mb-4">{t('config.format')}</h2>
<p className="text-xs">
{t(`config.formatGuidesDocs`)}:{' '}
Expand Down Expand Up @@ -171,6 +252,7 @@ const VisualConfigPanel: React.FC = (props) => {
vizStore.setVisualConfig('scaleIncludeUnmatchedChoropleth', scaleIncludeUnmatchedChoropleth);
vizStore.setVisualConfig('background', background);
vizStore.setVisualConfig('resolve', resolve);
vizStore.setVisualConfig('primaryColor', `rgba(${defaultColor.r},${defaultColor.g},${defaultColor.b},${defaultColor.a})`);
vizStore.setVisualConfig('useSvg', svg);
commonStore.setShowVisualConfigPanel(false);
});
Expand Down
1 change: 1 addition & 0 deletions packages/graphic-walker/src/interfaces.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -251,6 +251,7 @@ export interface IVisualConfig {
timeFormat?: string;
normalizedNumberFormat?: string;
};
primaryColor?:string;
resolve: {
x?: boolean;
y?: boolean;
Expand Down
11 changes: 7 additions & 4 deletions packages/graphic-walker/src/renderer/specRenderer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ import ReactVega, { IReactVegaHandler } from '../vis/react-vega';
import { DeepReadonly, DraggableFieldState, IDarkMode, IRow, IThemeKey, IVisualConfig, VegaGlobalConfig, IComputationFunction, IChannelScales } from '../interfaces';
import LoadingLayer from '../components/loadingLayer';
import { useCurrentMediaTheme } from '../utils/media';
import { builtInThemes } from '../vis/theme';
import { useTheme } from '../utils/useTheme';
import { builtInThemes, getPrimaryColor } from '../vis/theme';
import { getTheme } from '../utils/useTheme';

interface SpecRendererProps {
name?: string;
Expand Down Expand Up @@ -54,20 +54,23 @@ const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
() => columns.slice(0, -1).filter((f) => f.analyticType === 'dimension'),
[columns]
);


const defaultColor = visualConfig.primaryColor;

const isPivotTable = geoms[0] === 'table';

const hasFacet = rowLeftFacetFields.length > 0 || colLeftFacetFields.length > 0;

const enableResize = size.mode === 'fixed' && !hasFacet && Boolean(onChartResize);
const mediaTheme = useCurrentMediaTheme(dark);
const themeConfig = useTheme({
const themeConfig = defaultColor? getPrimaryColor(defaultColor)[mediaTheme]: getTheme({
themeKey,
mediaTheme,
themeConfig: customizedThemeConfig
})

const vegaConfig = useMemo<VegaGlobalConfig>(() => {
console.log(themeConfig)
const config: VegaGlobalConfig = {
...themeConfig,
background: mediaTheme === 'dark' ? '#18181f' : '#ffffff',
Expand Down
1 change: 1 addition & 0 deletions packages/graphic-walker/src/store/visualSpecStore.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -399,6 +399,7 @@ export class VizSpecStore {
case configKey === 'background':
case configKey === 'resolve':
case configKey === 'limit':
case configKey === 'primaryColor':
case configKey === 'stack': {
return (config[configKey] = value);
}
Expand Down
1 change: 1 addition & 0 deletions packages/graphic-walker/src/utils/save.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ export function initVisualConfig(): IVisualConfig {
interactiveScale: false,
sorted: 'none',
zeroScale: true,
primaryColor: 'rgba(91, 143, 249,1)',
scaleIncludeUnmatchedChoropleth: false,
background: undefined,
size: {
Expand Down
2 changes: 1 addition & 1 deletion packages/graphic-walker/src/utils/useTheme.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { IThemeKey } from "../interfaces";
import { builtInThemes } from "../vis/theme";

export function useTheme (props: { themeKey?: IThemeKey; themeConfig?: any; mediaTheme: 'dark' | 'light' }) {
export function getTheme (props: { themeKey?: IThemeKey; themeConfig?: any; mediaTheme: 'dark' | 'light' }) {
const { themeConfig, themeKey, mediaTheme } = props;
const config = (themeConfig ?? builtInThemes[themeKey ?? 'vega'])?.[mediaTheme];
return config
Expand Down
Loading

1 comment on commit bee41f1

@vercel
Copy link

@vercel vercel bot commented on bee41f1 Sep 26, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

graphic-walker – ./

graphic-walker-kanaries.vercel.app
graphic-walker-app.vercel.app
graphic-walker-git-main-kanaries.vercel.app
graphic-walker.kanaries.net

Please sign in to comment.