From 62427bb2ed18a5253ae2d212140391424090647b Mon Sep 17 00:00:00 2001 From: Deepankar Bhade Date: Sun, 13 Jun 2021 11:48:25 +0530 Subject: [PATCH 1/6] feat: labs here i come --- labs/usa.map.tsx | 329 +++++++++++++++++++++++++ package.json | 1 + pages/labs/index.tsx | 27 ++ tsconfig.json | 1 + typings/javascript-color-gradient.d.ts | 1 + yarn.lock | 5 + 6 files changed, 364 insertions(+) create mode 100644 labs/usa.map.tsx create mode 100644 pages/labs/index.tsx create mode 100644 typings/javascript-color-gradient.d.ts diff --git a/labs/usa.map.tsx b/labs/usa.map.tsx new file mode 100644 index 0000000..c639f46 --- /dev/null +++ b/labs/usa.map.tsx @@ -0,0 +1,329 @@ +import React from 'react'; + +const UsaMap = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); + +export default UsaMap; diff --git a/package.json b/package.json index 9a454f4..52c8cca 100644 --- a/package.json +++ b/package.json @@ -68,6 +68,7 @@ "@mdx-js/loader": "^1.6.22", "@next/mdx": "^10.2.3", "inter-ui": "^3.18.1", + "javascript-color-gradient": "^1.3.2", "jotai": "^0.16.0", "jspdf": "^2.3.1", "next-seo": "^4.23.0", diff --git a/pages/labs/index.tsx b/pages/labs/index.tsx new file mode 100644 index 0000000..a35bbb8 --- /dev/null +++ b/pages/labs/index.tsx @@ -0,0 +1,27 @@ +import MainLayout from '@/layouts/MainLayout'; +import UsaMap from 'labs/usa.map'; +import React from 'react'; + +const Lab = () => { + const [data, setData] = React.useState(); + React.useEffect(() => {}, []); + return ( + +
+ +
+ + + ); +}; + +export default Lab; diff --git a/tsconfig.json b/tsconfig.json index 316a264..349c81f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -10,6 +10,7 @@ "@/data/*": ["data/*"], "@/store/*": ["store/*"], "@/configs/*": ["configs/*"], + "@/labs/*": ["labs/*"], }, "strictNullChecks": true, "moduleResolution": "node", diff --git a/typings/javascript-color-gradient.d.ts b/typings/javascript-color-gradient.d.ts new file mode 100644 index 0000000..0a4d496 --- /dev/null +++ b/typings/javascript-color-gradient.d.ts @@ -0,0 +1 @@ +declare module 'javascript-color-gradient' \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 4c20d8d..b865e90 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2792,6 +2792,11 @@ isobject@^2.0.0: dependencies: isarray "1.0.0" +javascript-color-gradient@^1.3.2: + version "1.3.2" + resolved "https://registry.yarnpkg.com/javascript-color-gradient/-/javascript-color-gradient-1.3.2.tgz#6b19f3021721c1463ca2ed02cd1c1ed6b716e8e2" + integrity sha512-P/VjoTPdfRmMOkfR65m1BQTlX/hYphZIj5u1Ntvpxf+9011uXjazbEOQ63g3EhlgzHYa2uwVU3RVgy3gJuLdlQ== + jest-worker@24.9.0: version "24.9.0" resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-24.9.0.tgz#5dbfdb5b2d322e98567898238a9697bcce67b3e5" From 6baec46eb85d026c290187303157318fdd22844e Mon Sep 17 00:00:00 2001 From: Deepankar Bhade Date: Sun, 13 Jun 2021 12:34:18 +0530 Subject: [PATCH 2/6] feat: lab helpers functions --- labs/utils/createRandomData.ts | 10 ++++++++++ labs/utils/getLegendList.ts | 11 +++++++++++ labs/utils/getMapData.ts | 34 ++++++++++++++++++++++++++++++++++ labs/utils/getPaletteData.ts | 14 ++++++++++++++ labs/utils/sortObject.ts | 4 ++++ pages/labs/index.tsx | 26 +++++++++++++++++++++++++- 6 files changed, 98 insertions(+), 1 deletion(-) create mode 100644 labs/utils/createRandomData.ts create mode 100644 labs/utils/getLegendList.ts create mode 100644 labs/utils/getMapData.ts create mode 100644 labs/utils/getPaletteData.ts create mode 100644 labs/utils/sortObject.ts diff --git a/labs/utils/createRandomData.ts b/labs/utils/createRandomData.ts new file mode 100644 index 0000000..93063ab --- /dev/null +++ b/labs/utils/createRandomData.ts @@ -0,0 +1,10 @@ +const createRandomData = (obj : {[key: string]: string}): {[key: string]: number} => { + const data = {}; + Object.keys(obj).forEach((e) => { + // @ts-ignore + data[e] = Math.floor(Math.random() * 10000); + }); + return data; +} + +export default createRandomData; \ No newline at end of file diff --git a/labs/utils/getLegendList.ts b/labs/utils/getLegendList.ts new file mode 100644 index 0000000..3e908e9 --- /dev/null +++ b/labs/utils/getLegendList.ts @@ -0,0 +1,11 @@ +const getLegendList = (sortObj: { [key: string]: number } , count: number): number[] => { + const endVal = Object.values(sortObj)[Object.values(sortObj).length - 1]; + const lastLegend = Math.pow(10, endVal.toString().length); + const legendList: number[] = []; + for (let i = 1; i <= count; i++) { + legendList.push(i * (lastLegend / count)); + } + return legendList +}; + +export default getLegendList; diff --git a/labs/utils/getMapData.ts b/labs/utils/getMapData.ts new file mode 100644 index 0000000..66a474f --- /dev/null +++ b/labs/utils/getMapData.ts @@ -0,0 +1,34 @@ +interface Props { + sortedData: { [key: string]: number }; + legendList: number[]; + paletteData: string[] +} + +const getMapData= ({ sortedData , legendList ,paletteData }: Props) => { + const mapData: {fill: string , code: string , hide: boolean, val: number}[] = []; + const closest = (t: number) => + legendList.reduce((prev, curr) => Math.abs(curr - t) < Math.abs(prev - t) ? curr : prev); + Object.keys(sortedData).forEach((e) => { + const val = sortedData[e]; + const closestVal = closest(val); + const idx = legendList.indexOf(closestVal); + if (val > closestVal) { + mapData.push({ + fill: paletteData[idx + 1], + code: e, + hide: false, + val, + }); + } else { + mapData.push({ + fill: paletteData[idx], + code: e, + hide: false, + val, + }); + } + }); + return mapData; +} + +export default getMapData diff --git a/labs/utils/getPaletteData.ts b/labs/utils/getPaletteData.ts new file mode 100644 index 0000000..60b451d --- /dev/null +++ b/labs/utils/getPaletteData.ts @@ -0,0 +1,14 @@ +import Gradient from 'javascript-color-gradient'; + +const colorGradient = new Gradient(); + +const getPaletteData = (count: number) => { + const color1 = '#f9d56e'; + const color2 = '#ff1e56'; + + const paletteData = colorGradient.setGradient(color1, color2).setMidpoint(count).getArray(); + + return paletteData; +}; + +export default getPaletteData; diff --git a/labs/utils/sortObject.ts b/labs/utils/sortObject.ts new file mode 100644 index 0000000..97f1fb0 --- /dev/null +++ b/labs/utils/sortObject.ts @@ -0,0 +1,4 @@ +const sortObject = (d : {[key: string]: number}): {[key: string]: number}=> Object.entries(d) + .sort(([, a], [, b]) => a - b) + .reduce((r, [k, v]) => ({ ...r, [k]: v }), {}) +export default sortObject; \ No newline at end of file diff --git a/pages/labs/index.tsx b/pages/labs/index.tsx index a35bbb8..032b728 100644 --- a/pages/labs/index.tsx +++ b/pages/labs/index.tsx @@ -1,10 +1,34 @@ +import { UsaStateCodes } from '@/data/Usa/UsaStateCodes'; +import createRandomData from '@/labs/utils/createRandomData'; +import getLegendList from '@/labs/utils/getLegendList'; +import getMapData from '@/labs/utils/getMapData'; +import getPaletteData from '@/labs/utils/getPaletteData'; +import sortObject from '@/labs/utils/sortObject'; import MainLayout from '@/layouts/MainLayout'; import UsaMap from 'labs/usa.map'; import React from 'react'; const Lab = () => { const [data, setData] = React.useState(); - React.useEffect(() => {}, []); + React.useEffect(() => { + const count = 5; + const randData = createRandomData(UsaStateCodes); + const sortRandData = sortObject(randData); + const legendArr = getLegendList(sortRandData, count); + const paletteArr = getPaletteData(count); + const mapData = getMapData({ + sortedData: sortRandData, + legendList: legendArr, + paletteData: paletteArr + }); + mapData.forEach((e) => { + const el = document.getElementById(e.code); + if (el) { + el.style.fill = e.fill; + } + }); + console.log(randData, sortRandData, legendArr, paletteArr, mapData); + }, []); return (
From fa0615146265e108fc549619fd8aeee15de3a4fc Mon Sep 17 00:00:00 2001 From: Deepankar Bhade Date: Sun, 13 Jun 2021 13:37:21 +0530 Subject: [PATCH 3/6] feat: displays data and map --- labs/utils/getPaletteData.ts | 8 ++------ pages/labs/index.tsx | 40 ++++++++++++++++++++++++++++++++---- 2 files changed, 38 insertions(+), 10 deletions(-) diff --git a/labs/utils/getPaletteData.ts b/labs/utils/getPaletteData.ts index 60b451d..1f6bdd3 100644 --- a/labs/utils/getPaletteData.ts +++ b/labs/utils/getPaletteData.ts @@ -2,12 +2,8 @@ import Gradient from 'javascript-color-gradient'; const colorGradient = new Gradient(); -const getPaletteData = (count: number) => { - const color1 = '#f9d56e'; - const color2 = '#ff1e56'; - - const paletteData = colorGradient.setGradient(color1, color2).setMidpoint(count).getArray(); - +const getPaletteData = (count: number , colorList: string[]) => { + const paletteData = colorGradient.setGradient(...colorList).setMidpoint(count).getArray(); return paletteData; }; diff --git a/pages/labs/index.tsx b/pages/labs/index.tsx index 032b728..c4b2366 100644 --- a/pages/labs/index.tsx +++ b/pages/labs/index.tsx @@ -8,19 +8,28 @@ import MainLayout from '@/layouts/MainLayout'; import UsaMap from 'labs/usa.map'; import React from 'react'; +interface MapLabData { + fill: string; + code: string; + hide: boolean; + val: number; +} + const Lab = () => { - const [data, setData] = React.useState(); + const [data, setData] = React.useState([]); React.useEffect(() => { const count = 5; + const colorList = ['#f1f3f8', '#393b44']; const randData = createRandomData(UsaStateCodes); const sortRandData = sortObject(randData); const legendArr = getLegendList(sortRandData, count); - const paletteArr = getPaletteData(count); - const mapData = getMapData({ + const paletteArr = getPaletteData(count, colorList); + const mapData: MapLabData[] = getMapData({ sortedData: sortRandData, legendList: legendArr, paletteData: paletteArr }); + setData(mapData); mapData.forEach((e) => { const el = document.getElementById(e.code); if (el) { @@ -32,13 +41,36 @@ const Lab = () => { return (
+
+ + + + + + + + + + {data.map((e) => ( + + + {/* @ts-ignore */} + + + + ))} + +
CodeNameValue
{e.code}{UsaStateCodes[e.code]}{e.val}
+
+
+
+ ); +}; + +export default LabColorPicker; diff --git a/pages/labs/index.tsx b/pages/labs/index.tsx index c4b2366..dffe646 100644 --- a/pages/labs/index.tsx +++ b/pages/labs/index.tsx @@ -1,10 +1,12 @@ import { UsaStateCodes } from '@/data/Usa/UsaStateCodes'; +import LabColorPicker from '@/labs/components/LabColorPicker'; import createRandomData from '@/labs/utils/createRandomData'; import getLegendList from '@/labs/utils/getLegendList'; import getMapData from '@/labs/utils/getMapData'; import getPaletteData from '@/labs/utils/getPaletteData'; import sortObject from '@/labs/utils/sortObject'; import MainLayout from '@/layouts/MainLayout'; +import { Button, Input, Spacer } from '@geist-ui/react'; import UsaMap from 'labs/usa.map'; import React from 'react'; @@ -17,13 +19,22 @@ interface MapLabData { const Lab = () => { const [data, setData] = React.useState([]); + const [count, setCount] = React.useState(10); + const [palette, setPalette] = React.useState(['#b9fffc', '#7579e7']); + const addPalette = () => { + const el = document.getElementById('add-palette'); + if (el) { + const copy = palette; + copy.push(el.value); + setPalette(copy); + console.log(copy); + } + }; + const randData = createRandomData(UsaStateCodes); + const sortRandData = sortObject(randData); React.useEffect(() => { - const count = 5; - const colorList = ['#f1f3f8', '#393b44']; - const randData = createRandomData(UsaStateCodes); - const sortRandData = sortObject(randData); const legendArr = getLegendList(sortRandData, count); - const paletteArr = getPaletteData(count, colorList); + const paletteArr = getPaletteData(count, palette); const mapData: MapLabData[] = getMapData({ sortedData: sortRandData, legendList: legendArr, @@ -37,30 +48,47 @@ const Lab = () => { } }); console.log(randData, sortRandData, legendArr, paletteArr, mapData); - }, []); + }, [palette]); return (
-
- - - - - - - - - - {data.map((e) => ( - - - {/* @ts-ignore */} - - +
+ {palette.map((e) => ( + + ))} +
+ + + +
+ setCount(+e.target.value)} + /> +
+
CodeNameValue
{e.code}{UsaStateCodes[e.code]}{e.val}
+ + + + + - ))} - -
CodeNameValue
+ + + {data.map((e) => ( + + {e.code} + {/* @ts-ignore */} + {UsaStateCodes[e.code]} + {e.val} + + ))} + + +
@@ -73,7 +101,7 @@ const Lab = () => { .tb-ctx { width: 300px; overflow-y: scroll; - height: 80vh; + height: 50vh; } `} diff --git a/styles/main.css b/styles/main.css index 39fcc22..95aa32f 100644 --- a/styles/main.css +++ b/styles/main.css @@ -176,3 +176,7 @@ table td:nth-child(1) { table tr:not(:last-of-type) td { border-bottom: 1px solid #333; } +.my-2 { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} From 524b737c9c12796600066bfc4bd9d53dce4acdcb Mon Sep 17 00:00:00 2001 From: Deepankar Bhade Date: Sun, 13 Jun 2021 19:27:52 +0530 Subject: [PATCH 5/6] feat: introducing lab store --- pages/labs/index.tsx | 93 +++++++++++------------------------------- store/lab.store.ts | 9 ++++ typings/lab.store.d.ts | 12 ++++++ 3 files changed, 44 insertions(+), 70 deletions(-) create mode 100644 store/lab.store.ts create mode 100644 typings/lab.store.d.ts diff --git a/pages/labs/index.tsx b/pages/labs/index.tsx index dffe646..60d2c3b 100644 --- a/pages/labs/index.tsx +++ b/pages/labs/index.tsx @@ -6,91 +6,44 @@ import getMapData from '@/labs/utils/getMapData'; import getPaletteData from '@/labs/utils/getPaletteData'; import sortObject from '@/labs/utils/sortObject'; import MainLayout from '@/layouts/MainLayout'; +import { LabMapStoreType } from '@/typings/lab.store'; import { Button, Input, Spacer } from '@geist-ui/react'; import UsaMap from 'labs/usa.map'; +import { count } from 'node:console'; import React from 'react'; -interface MapLabData { - fill: string; - code: string; - hide: boolean; - val: number; -} - const Lab = () => { - const [data, setData] = React.useState([]); - const [count, setCount] = React.useState(10); - const [palette, setPalette] = React.useState(['#b9fffc', '#7579e7']); - const addPalette = () => { - const el = document.getElementById('add-palette'); - if (el) { - const copy = palette; - copy.push(el.value); - setPalette(copy); - console.log(copy); - } - }; - const randData = createRandomData(UsaStateCodes); - const sortRandData = sortObject(randData); - React.useEffect(() => { - const legendArr = getLegendList(sortRandData, count); - const paletteArr = getPaletteData(count, palette); - const mapData: MapLabData[] = getMapData({ - sortedData: sortRandData, - legendList: legendArr, - paletteData: paletteArr + const [data, setData] = React.useState({ + mapData: [], + count: 10, + paletteArr: ['#f9d56e', '#ff1e56'] + }); + const getRandomData = () => { + const randData = createRandomData(UsaStateCodes); + const sortedData = sortObject(randData); + const legendList = getLegendList(sortedData, data.count); + const paletteData = getPaletteData(data.count, data.paletteArr); + const mapData = getMapData({ + sortedData, + legendList, + paletteData }); - setData(mapData); mapData.forEach((e) => { const el = document.getElementById(e.code); if (el) { el.style.fill = e.fill; } }); - console.log(randData, sortRandData, legendArr, paletteArr, mapData); - }, [palette]); + setData({ + mapData, + count: 10, + paletteArr: data.paletteArr + }); + }; return (
-
- {palette.map((e) => ( - - ))} -
- - - -
- setCount(+e.target.value)} - /> -
- - - - - - - - - - {data.map((e) => ( - - - {/* @ts-ignore */} - - - - ))} - -
CodeNameValue
{e.code}{UsaStateCodes[e.code]}{e.val}
-
-
- +
); diff --git a/pages/labs/index.tsx b/pages/labs/index.tsx index 60d2c3b..7083e78 100644 --- a/pages/labs/index.tsx +++ b/pages/labs/index.tsx @@ -9,15 +9,72 @@ import MainLayout from '@/layouts/MainLayout'; import { LabMapStoreType } from '@/typings/lab.store'; import { Button, Input, Spacer } from '@geist-ui/react'; import UsaMap from 'labs/usa.map'; -import { count } from 'node:console'; import React from 'react'; +const reOrderArrayElements = (arr: string[], val: string, oldIdx: number, newIdx: number) => { + // remove it + arr.splice(oldIdx, 1); + // add it + arr.splice(newIdx, 0, val); + return arr; +}; + const Lab = () => { const [data, setData] = React.useState({ mapData: [], count: 10, paletteArr: ['#f9d56e', '#ff1e56'] }); + const changePaletteColor = (v: string, i: number) => { + const copy = data.paletteArr; + copy[i] = v; + setData((st) => ({ + ...st, + paletteArr: copy + })); + }; + const addPalette = () => { + const el = document.getElementById('add-palette'); + if (el) { + const copy = data.paletteArr; + // @ts-ignore + copy.push(el.value); + setData((st) => ({ + ...st, + paletteArr: copy + })); + } + }; + const removePalette = (i: number) => { + const copy = data.paletteArr; + copy.splice(i, 1); + setData((st) => ({ + ...st, + paletteArr: copy + })); + }; + const handleLegendPosChange = (idx: number, up: boolean) => { + const len = data.paletteArr.length; + const copy = data.paletteArr; + if (up) { + if (idx === 0) { + reOrderArrayElements(copy, copy[idx], idx, len - 1); + } else { + reOrderArrayElements(copy, copy[idx], idx, idx - 1); + } + } else if (!up) { + if (idx === len - 1) { + reOrderArrayElements(copy, copy[idx], idx, 0); + } else { + reOrderArrayElements(copy, copy[idx], idx, idx + 1); + } + } + // @ts-ignore + setData((prev) => ({ + ...prev, + paletteArr: copy + })); + }; const getRandomData = () => { const randData = createRandomData(UsaStateCodes); const sortedData = sortObject(randData); @@ -40,10 +97,66 @@ const Lab = () => { paletteArr: data.paletteArr }); }; + data.mapData.forEach((e) => { + const el = document.getElementById(e.code); + if (el) { + el.style.fill = e.fill; + } + }); return (
- +
+ + {data.paletteArr.map((e, i) => ( + + ))} +
+ + + +
+ + setData((p) => ({ + ...p, + count: +e.target.value + })) + } + /> +
+ + + + + + + + + + {data.mapData.map((e) => ( + + + {/* @ts-ignore */} + + + + ))} + +
CodeNameValue
{e.code}{UsaStateCodes[e.code]}{e.val}
+
+