From ffc1bb95bb75d82aecb8ed8a5b576e6b4adce86a Mon Sep 17 00:00:00 2001 From: Rob Walker Date: Tue, 13 Aug 2024 16:14:17 +0100 Subject: [PATCH 1/6] fix: Migrate measureText to getGlyphWidths for RNWeb support --- lib/src/cartesian/components/CartesianAxis.tsx | 4 ++-- lib/src/cartesian/utils/transformInputData.ts | 5 ++--- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/lib/src/cartesian/components/CartesianAxis.tsx b/lib/src/cartesian/components/CartesianAxis.tsx index 1e265d84..4cbd4647 100644 --- a/lib/src/cartesian/components/CartesianAxis.tsx +++ b/lib/src/cartesian/components/CartesianAxis.tsx @@ -117,7 +117,7 @@ export const CartesianAxis = < const yAxisNodes = yTicksNormalized.map((tick) => { const contentY = formatYLabel(tick as never); - const labelWidth = font?.measureText?.(contentY).width ?? 0; + const labelWidth = font?.getGlyphWidths?.(font.getGlyphIDs(contentY)).reduce((sum, value) => sum + value, 0) ?? 0 const labelY = yScale(tick) + fontSize / 3; const labelX = (() => { // left, outset @@ -166,7 +166,7 @@ export const CartesianAxis = < const xAxisNodes = xTicksNormalized.map((tick) => { const val = isNumericalData ? tick : ix[tick]; const contentX = formatXLabel(val as never); - const labelWidth = font?.measureText?.(contentX).width ?? 0; + const labelWidth = font?.getGlyphWidths?.(font.getGlyphIDs(contentX)).reduce((sum, value) => sum + value, 0) ?? 0; const labelX = xScale(tick) - (labelWidth ?? 0) / 2; const canFitLabelContent = yAxisPosition === "left" ? labelX + labelWidth < x2r : x1r < labelX; diff --git a/lib/src/cartesian/utils/transformInputData.ts b/lib/src/cartesian/utils/transformInputData.ts index 7ab23781..02207b50 100644 --- a/lib/src/cartesian/utils/transformInputData.ts +++ b/lib/src/cartesian/utils/transformInputData.ts @@ -194,9 +194,8 @@ export const transformInputData = < const maxYLabel = Math.max( ...yTicksNormalized.map( (yTick) => - axisOptions?.font?.measureText( - axisOptions?.formatYLabel?.(yTick as RawData[YK]) || String(yTick), - ).width ?? 0, + axisOptions?.font?.getGlyphWidths?.(axisOptions.font.getGlyphIDs(axisOptions?.formatYLabel?.(yTick as RawData[YK]) || String(yTick))).reduce((sum, value) => sum + value, 0) + ?? 0, ), ); From f150539b6508ea4882718f022641051b2947574e Mon Sep 17 00:00:00 2001 From: Rob Walker Date: Tue, 13 Aug 2024 16:15:55 +0100 Subject: [PATCH 2/6] Fix: Flatten the style prop for Canvas, as required by the web version of Canvas --- example/app/pie-and-donut-charts.tsx | 4 ++-- lib/src/polar/PolarChart.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/example/app/pie-and-donut-charts.tsx b/example/app/pie-and-donut-charts.tsx index b9d04f09..a0ef309c 100644 --- a/example/app/pie-and-donut-charts.tsx +++ b/example/app/pie-and-donut-charts.tsx @@ -137,7 +137,7 @@ const PieChartMultipleDataPoints = () => { {data.map((d, i) => ( - + { alignItems: "center", }} > - + {/* https://shopify.github.io/react-native-skia/docs/canvas/contexts/ we have to re-inject our context to make it available in the skia renderer From fb9f2ee1b5460665d481c4fe2d31e9d69163be83 Mon Sep 17 00:00:00 2001 From: Rob Walker Date: Tue, 13 Aug 2024 16:16:39 +0100 Subject: [PATCH 3/6] lint: Clean up style props --- example/app.json | 1 + example/app/pie-and-donut-charts.tsx | 14 +++++++------- example/app/stock-price.tsx | 3 ++- lib/src/polar/PolarChart.tsx | 2 +- 4 files changed, 11 insertions(+), 9 deletions(-) diff --git a/example/app.json b/example/app.json index 48978d26..01bfd598 100644 --- a/example/app.json +++ b/example/app.json @@ -15,6 +15,7 @@ "assetBundlePatterns": [ "**/*" ], + "platforms": ["android", "ios", "web"], "ios": { "supportsTablet": true, "userInterfaceStyle": "automatic", diff --git a/example/app/pie-and-donut-charts.tsx b/example/app/pie-and-donut-charts.tsx index a0ef309c..3c5151bf 100644 --- a/example/app/pie-and-donut-charts.tsx +++ b/example/app/pie-and-donut-charts.tsx @@ -136,7 +136,7 @@ const PieChartMultipleDataPoints = () => { {data.map((d, i) => ( - + { color={d.color} /> - {d.label} + {d.label} ))} @@ -281,7 +281,7 @@ const PieChartSimpleCustomLegend = () => { color={d.color} /> - {d.label} + {d.label} ); })} @@ -344,20 +344,20 @@ export default function PieAndDonutCharts(props: { segment: string }) { Pie Chart with Single Data Point - + Pie Chart with Multiple Data Points - + Pie Chart with Insets - + Pie Chart with Custom Legend - + Half Donut Chart diff --git a/example/app/stock-price.tsx b/example/app/stock-price.tsx index d89fd49a..f6424eaf 100644 --- a/example/app/stock-price.tsx +++ b/example/app/stock-price.tsx @@ -380,7 +380,8 @@ const ActiveValueIndicator = ({ () => "$" + activeValue.value.toFixed(2), ); const activeValueWidth = useDerivedValue( - () => font?.measureText(activeValueDisplay.value).width || 0, + () => + font?.getGlyphWidths?.(font.getGlyphIDs(activeValueDisplay.value)).reduce((sum, value) => sum + value, 0) || 0 ); const activeValueX = useDerivedValue( () => xPosition.value - activeValueWidth.value / 2, diff --git a/lib/src/polar/PolarChart.tsx b/lib/src/polar/PolarChart.tsx index d9504803..1d1f1a7b 100644 --- a/lib/src/polar/PolarChart.tsx +++ b/lib/src/polar/PolarChart.tsx @@ -42,7 +42,7 @@ const PolarChartBase = ( const ctx = usePolarChartContext(); return ( - + Date: Tue, 13 Aug 2024 16:17:17 +0100 Subject: [PATCH 4/6] Fix: Update example project to add web support --- example/index.web.tsx | 15 +++++++ example/package.json | 10 +++-- yarn.lock | 93 ++++++++++++++++++++++++++++++++++++++++--- 3 files changed, 109 insertions(+), 9 deletions(-) create mode 100644 example/index.web.tsx diff --git a/example/index.web.tsx b/example/index.web.tsx new file mode 100644 index 00000000..2ee932c3 --- /dev/null +++ b/example/index.web.tsx @@ -0,0 +1,15 @@ +import '@expo/metro-runtime'; +import { App } from 'expo-router/build/qualified-entry'; +import { renderRootComponent } from 'expo-router/build/renderRootComponent'; +import { version } from 'canvaskit-wasm/package.json'; + +import { LoadSkiaWeb } from '@shopify/react-native-skia/lib/module/web'; + +// When used on the web, we need to load the CanvasKit WASM file before rendering content +// For simplicity, we are using a CDN to load the file, but it can be hosted on your own server as well +// See https://shopify.github.io/react-native-skia/docs/getting-started/web for more details +LoadSkiaWeb({ + locateFile: (file) => `https://cdn.jsdelivr.net/npm/canvaskit-wasm@${version}/bin/full/${file}` +}).then(async () => { + renderRootComponent(App); +}); diff --git a/example/package.json b/example/package.json index 0b5b7b69..2468a1b2 100644 --- a/example/package.json +++ b/example/package.json @@ -4,13 +4,15 @@ "main": "index.js", "scripts": { "start": "expo start -c", - "android": "expo run:android", - "ios": "expo run:ios" + "android": "expo start --android", + "ios": "expo start --ios", + "web": "expo start --web" }, "dependencies": { + "@expo/metro-runtime": "~3.2.1", "@expo/vector-icons": "^14.0.0", "@gorhom/bottom-sheet": "^4", - "@react-native-community/slider": "4.5.2", + "@react-native-community/slider": "4.4.2", "@react-native-segmented-control/segmented-control": "2.5.2", "@shopify/react-native-skia": "1.2.3", "date-fns": "^2.30.0", @@ -24,6 +26,7 @@ "expo-splash-screen": "~0.27.4", "expo-status-bar": "~1.12.1", "react": "18.2.0", + "react-dom": "18.2.0", "react-fast-compare": "^3.2.2", "react-native": "0.74.1", "react-native-dark": "^0.1.4", @@ -31,6 +34,7 @@ "react-native-reanimated": "3.10.0", "react-native-safe-area-context": "4.10.1", "react-native-screens": "3.31.1", + "react-native-web": "~0.19.10", "react-native-wheel-color-picker": "^1.2.0" }, "devDependencies": { diff --git a/yarn.lock b/yarn.lock index 96ff118c..99b6a070 100644 --- a/yarn.lock +++ b/yarn.lock @@ -769,6 +769,13 @@ dependencies: regenerator-runtime "^0.14.0" +"@babel/runtime@^7.18.6": + version "7.25.0" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.0.tgz#3af9a91c1b739c569d5d80cc917280919c544ecb" + integrity sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw== + dependencies: + regenerator-runtime "^0.14.0" + "@babel/template@^7.0.0", "@babel/template@^7.22.15", "@babel/template@^7.24.0": version "7.24.0" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.24.0.tgz#c6a524aa93a4a05d66aaf31654258fae69d87d50" @@ -1407,7 +1414,7 @@ postcss "~8.4.32" resolve-from "^5.0.0" -"@expo/metro-runtime@3.2.1": +"@expo/metro-runtime@3.2.1", "@expo/metro-runtime@~3.2.1": version "3.2.1" resolved "https://registry.yarnpkg.com/@expo/metro-runtime/-/metro-runtime-3.2.1.tgz#bbab2ca9d0c8d256172eb4688123af6be67c7674" integrity sha512-L7xNo5SmK+rcuXDm/+VBBImpA7FZsVB+m/rNr3fNl5or+1+yrZe99ViF7LZ8DOoVqAqcb4aCAXvGrP2JNYo1/Q== @@ -1908,10 +1915,10 @@ prompts "^2.4.2" semver "^7.5.2" -"@react-native-community/slider@4.5.2": - version "4.5.2" - resolved "https://registry.yarnpkg.com/@react-native-community/slider/-/slider-4.5.2.tgz#c3835788dbc1bd83d3778b83ca15533c805db149" - integrity sha512-DbFyCyI7rwl0FkBkp0lzEVp+5mNfS5qU/nM2sK2aSguWhj0Odkt1aKHP2iW/ljruOhgS/O4dEixXlne4OdZJDQ== +"@react-native-community/slider@4.4.2": + version "4.4.2" + resolved "https://registry.yarnpkg.com/@react-native-community/slider/-/slider-4.4.2.tgz#1fea0eb3ae31841fe87bd6c4fc67569066e9cf4b" + integrity sha512-D9bv+3Vd2gairAhnRPAghwccgEmoM7g562pm8i4qB3Esrms5mggF81G3UvCyc0w3jjtFHh8dpQkfEoKiP0NW/Q== "@react-native-segmented-control/segmented-control@2.5.2": version "2.5.2" @@ -2083,6 +2090,11 @@ resolved "https://registry.yarnpkg.com/@react-native/normalize-colors/-/normalize-colors-0.74.83.tgz#86ef925bacf219d74df115bcfb615f62d8142e85" integrity sha512-jhCY95gRDE44qYawWVvhTjTplW1g+JtKTKM3f8xYT1dJtJ8QWv+gqEtKcfmOHfDkSDaMKG0AGBaDTSK8GXLH8Q== +"@react-native/normalize-colors@^0.74.1": + version "0.74.87" + resolved "https://registry.yarnpkg.com/@react-native/normalize-colors/-/normalize-colors-0.74.87.tgz#a814169d0ce4ce13ffebcda0a3a5a3f780ccd772" + integrity sha512-Xh7Nyk/MPefkb0Itl5Z+3oOobeG9lfLb7ZOY2DKpFnoCE1TzBmib9vMNdFaLdSxLIP+Ec6icgKtdzYg8QUPYzA== + "@react-native/virtualized-lists@0.74.83": version "0.74.83" resolved "https://registry.yarnpkg.com/@react-native/virtualized-lists/-/virtualized-lists-0.74.83.tgz#5595d6aefd9679d1295c56a1d1653b1fb261bd62" @@ -3707,6 +3719,13 @@ crypto-random-string@^2.0.0: resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5" integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA== +css-in-js-utils@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-3.1.0.tgz#640ae6a33646d401fc720c54fc61c42cd76ae2bb" + integrity sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A== + dependencies: + hyphenate-style-name "^1.0.3" + csstype@^3.0.2: version "3.1.3" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81" @@ -4687,6 +4706,11 @@ fast-levenshtein@^2.0.6: resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917" integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw== +fast-loops@^1.1.3: + version "1.1.4" + resolved "https://registry.yarnpkg.com/fast-loops/-/fast-loops-1.1.4.tgz#61bc77d518c0af5073a638c6d9d5c7683f069ce2" + integrity sha512-8dbd3XWoKCTms18ize6JmQF1SFnnfj5s0B7rRry22EofgMu7B6LKHVh+XfFqFGsqnbH54xgeO83PzpKI+ODhlg== + fast-xml-parser@^4.0.12, fast-xml-parser@^4.2.4: version "4.3.6" resolved "https://registry.yarnpkg.com/fast-xml-parser/-/fast-xml-parser-4.3.6.tgz#190f9d99097f0c8f2d3a0e681a10404afca052ff" @@ -4720,7 +4744,7 @@ fbjs-css-vars@^1.0.0: resolved "https://registry.yarnpkg.com/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz#216551136ae02fe255932c3ec8775f18e2c078b8" integrity sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ== -fbjs@^3.0.0: +fbjs@^3.0.0, fbjs@^3.0.4: version "3.0.5" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-3.0.5.tgz#aa0edb7d5caa6340011790bd9249dbef8a81128d" integrity sha512-ztsSx77JBtkuMrEypfhgc3cI0+0h+svqeie7xHbh1k/IKdcydnvadp/mUaGgjAOXQmQSxsqgaRhS3q9fy+1kxg== @@ -5274,6 +5298,11 @@ human-signals@^2.1.0: resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0" integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw== +hyphenate-style-name@^1.0.3: + version "1.1.0" + resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.1.0.tgz#1797bf50369588b47b72ca6d5e65374607cf4436" + integrity sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw== + iconv-lite@^0.4.24: version "0.4.24" resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b" @@ -5347,6 +5376,14 @@ ini@~1.3.0: resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c" integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew== +inline-style-prefixer@^6.0.1: + version "6.0.4" + resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-6.0.4.tgz#4290ed453ab0e4441583284ad86e41ad88384f44" + integrity sha512-FwXmZC2zbeeS7NzGjJ6pAiqRhXR0ugUShSNb6GApMl6da0/XGc4MOJsoWAywia52EEWbXNSy0pzkwz/+Y+swSg== + dependencies: + css-in-js-utils "^3.1.0" + fast-loops "^1.1.3" + internal-ip@4.3.0: version "4.3.0" resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-4.3.0.tgz#845452baad9d2ca3b69c635a137acb9a0dad0907" @@ -6268,6 +6305,11 @@ memoize-one@^5.0.0: resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e" integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q== +memoize-one@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045" + integrity sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw== + memory-cache@~0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/memory-cache/-/memory-cache-0.2.0.tgz#7890b01d52c00c8ebc9d533e1f8eb17e3034871a" @@ -7248,6 +7290,11 @@ possible-typed-array-names@^1.0.0: resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f" integrity sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q== +postcss-value-parser@^4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" + integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== + postcss@^8.4.38, postcss@~8.4.32: version "8.4.38" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.38.tgz#b387d533baf2054288e337066d81c6bee9db9e0e" @@ -7437,6 +7484,14 @@ react-devtools-core@^5.0.0: shell-quote "^1.6.1" ws "^7" +react-dom@18.2.0: + version "18.2.0" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d" + integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g== + dependencies: + loose-envify "^1.1.0" + scheduler "^0.23.0" + react-fast-compare@^3.2.2: version "3.2.2" resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49" @@ -7522,6 +7577,20 @@ react-native-screens@3.31.1: react-freeze "^1.0.0" warn-once "^0.1.0" +react-native-web@~0.19.10: + version "0.19.12" + resolved "https://registry.yarnpkg.com/react-native-web/-/react-native-web-0.19.12.tgz#30d1fd70bdff7886f43c0c2698629d830fade6bc" + integrity sha512-o2T0oztoVDQjztt4YksO9S1XRjoH/AqcSvifgWLrPJgGVbMWsfhILgl6lfUdEamVZzZSVV/2gqDVMAk/qq7mZw== + dependencies: + "@babel/runtime" "^7.18.6" + "@react-native/normalize-colors" "^0.74.1" + fbjs "^3.0.4" + inline-style-prefixer "^6.0.1" + memoize-one "^6.0.0" + nullthrows "^1.1.1" + postcss-value-parser "^4.2.0" + styleq "^0.1.3" + react-native-wheel-color-picker@^1.2.0: version "1.3.1" resolved "https://registry.yarnpkg.com/react-native-wheel-color-picker/-/react-native-wheel-color-picker-1.3.1.tgz#378cb00d045823a8a24838408a83f6387ff87a23" @@ -7975,6 +8044,13 @@ scheduler@^0.21.0: dependencies: loose-envify "^1.1.0" +scheduler@^0.23.0: + version "0.23.2" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3" + integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ== + dependencies: + loose-envify "^1.1.0" + schema-utils@^4.0.1: version "4.2.0" resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-4.2.0.tgz#70d7c93e153a273a805801882ebd3bff20d89c8b" @@ -8500,6 +8576,11 @@ structured-headers@^0.4.1: resolved "https://registry.yarnpkg.com/structured-headers/-/structured-headers-0.4.1.tgz#77abd9410622c6926261c09b9d16cf10592694d1" integrity sha512-0MP/Cxx5SzeeZ10p/bZI0S6MpgD+yxAhi1BOQ34jgnMXsCq3j1t6tQnZu+KdlL7dvJTLT3g9xN8tl10TqgFMcg== +styleq@^0.1.3: + version "0.1.3" + resolved "https://registry.yarnpkg.com/styleq/-/styleq-0.1.3.tgz#8efb2892debd51ce7b31dc09c227ad920decab71" + integrity sha512-3ZUifmCDCQanjeej1f6kyl/BeP/Vae5EYkQ9iJfUm/QwZvlgnZzyflqAsAWYURdtea8Vkvswu2GrC57h3qffcA== + sucrase@3.34.0: version "3.34.0" resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.34.0.tgz#1e0e2d8fcf07f8b9c3569067d92fbd8690fb576f" From fa4714f84d21b61c3638c76505d8b0d768cbbd6a Mon Sep 17 00:00:00 2001 From: Rob Walker Date: Tue, 13 Aug 2024 16:21:57 +0100 Subject: [PATCH 5/6] lint --- example/app/stock-price.tsx | 6 ++++-- example/index.web.tsx | 15 +++++++++------ example/package.json | 1 + lib/src/cartesian/components/CartesianAxis.tsx | 10 ++++++++-- lib/src/cartesian/utils/transformInputData.ts | 10 ++++++++-- yarn.lock | 2 +- 6 files changed, 31 insertions(+), 13 deletions(-) diff --git a/example/app/stock-price.tsx b/example/app/stock-price.tsx index f6424eaf..003902e9 100644 --- a/example/app/stock-price.tsx +++ b/example/app/stock-price.tsx @@ -380,8 +380,10 @@ const ActiveValueIndicator = ({ () => "$" + activeValue.value.toFixed(2), ); const activeValueWidth = useDerivedValue( - () => - font?.getGlyphWidths?.(font.getGlyphIDs(activeValueDisplay.value)).reduce((sum, value) => sum + value, 0) || 0 + () => + font + ?.getGlyphWidths?.(font.getGlyphIDs(activeValueDisplay.value)) + .reduce((sum, value) => sum + value, 0) || 0, ); const activeValueX = useDerivedValue( () => xPosition.value - activeValueWidth.value / 2, diff --git a/example/index.web.tsx b/example/index.web.tsx index 2ee932c3..8a0e5120 100644 --- a/example/index.web.tsx +++ b/example/index.web.tsx @@ -1,15 +1,18 @@ -import '@expo/metro-runtime'; -import { App } from 'expo-router/build/qualified-entry'; -import { renderRootComponent } from 'expo-router/build/renderRootComponent'; -import { version } from 'canvaskit-wasm/package.json'; +import "@expo/metro-runtime"; +import { App } from "expo-router/build/qualified-entry"; +import { renderRootComponent } from "expo-router/build/renderRootComponent"; -import { LoadSkiaWeb } from '@shopify/react-native-skia/lib/module/web'; +// eslint-disable-next-line import/no-unresolved +import { version } from "canvaskit-wasm/package.json"; + +import { LoadSkiaWeb } from "@shopify/react-native-skia/lib/module/web"; // When used on the web, we need to load the CanvasKit WASM file before rendering content // For simplicity, we are using a CDN to load the file, but it can be hosted on your own server as well // See https://shopify.github.io/react-native-skia/docs/getting-started/web for more details LoadSkiaWeb({ - locateFile: (file) => `https://cdn.jsdelivr.net/npm/canvaskit-wasm@${version}/bin/full/${file}` + locateFile: (file) => + `https://cdn.jsdelivr.net/npm/canvaskit-wasm@${version}/bin/full/${file}`, }).then(async () => { renderRootComponent(App); }); diff --git a/example/package.json b/example/package.json index 2468a1b2..89303a6c 100644 --- a/example/package.json +++ b/example/package.json @@ -15,6 +15,7 @@ "@react-native-community/slider": "4.4.2", "@react-native-segmented-control/segmented-control": "2.5.2", "@shopify/react-native-skia": "1.2.3", + "canvaskit-wasm": "^0.39.1", "date-fns": "^2.30.0", "expo": "^51.0.0", "expo-asset": "~10.0.6", diff --git a/lib/src/cartesian/components/CartesianAxis.tsx b/lib/src/cartesian/components/CartesianAxis.tsx index 4cbd4647..94b892b5 100644 --- a/lib/src/cartesian/components/CartesianAxis.tsx +++ b/lib/src/cartesian/components/CartesianAxis.tsx @@ -117,7 +117,10 @@ export const CartesianAxis = < const yAxisNodes = yTicksNormalized.map((tick) => { const contentY = formatYLabel(tick as never); - const labelWidth = font?.getGlyphWidths?.(font.getGlyphIDs(contentY)).reduce((sum, value) => sum + value, 0) ?? 0 + const labelWidth = + font + ?.getGlyphWidths?.(font.getGlyphIDs(contentY)) + .reduce((sum, value) => sum + value, 0) ?? 0; const labelY = yScale(tick) + fontSize / 3; const labelX = (() => { // left, outset @@ -166,7 +169,10 @@ export const CartesianAxis = < const xAxisNodes = xTicksNormalized.map((tick) => { const val = isNumericalData ? tick : ix[tick]; const contentX = formatXLabel(val as never); - const labelWidth = font?.getGlyphWidths?.(font.getGlyphIDs(contentX)).reduce((sum, value) => sum + value, 0) ?? 0; + const labelWidth = + font + ?.getGlyphWidths?.(font.getGlyphIDs(contentX)) + .reduce((sum, value) => sum + value, 0) ?? 0; const labelX = xScale(tick) - (labelWidth ?? 0) / 2; const canFitLabelContent = yAxisPosition === "left" ? labelX + labelWidth < x2r : x1r < labelX; diff --git a/lib/src/cartesian/utils/transformInputData.ts b/lib/src/cartesian/utils/transformInputData.ts index 02207b50..a586b641 100644 --- a/lib/src/cartesian/utils/transformInputData.ts +++ b/lib/src/cartesian/utils/transformInputData.ts @@ -194,8 +194,14 @@ export const transformInputData = < const maxYLabel = Math.max( ...yTicksNormalized.map( (yTick) => - axisOptions?.font?.getGlyphWidths?.(axisOptions.font.getGlyphIDs(axisOptions?.formatYLabel?.(yTick as RawData[YK]) || String(yTick))).reduce((sum, value) => sum + value, 0) - ?? 0, + axisOptions?.font + ?.getGlyphWidths?.( + axisOptions.font.getGlyphIDs( + axisOptions?.formatYLabel?.(yTick as RawData[YK]) || + String(yTick), + ), + ) + .reduce((sum, value) => sum + value, 0) ?? 0, ), ); diff --git a/yarn.lock b/yarn.lock index 99b6a070..187613fa 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3349,7 +3349,7 @@ caniuse-lite@^1.0.30001587: resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001614.tgz#f894b4209376a0bf923d67d9c361d96b1dfebe39" integrity sha512-jmZQ1VpmlRwHgdP1/uiKzgiAuGOfLEJsYFP4+GBou/QQ4U6IOJCB4NP1c+1p9RGLpwObcT94jA5/uO+F1vBbog== -canvaskit-wasm@0.39.1: +canvaskit-wasm@0.39.1, canvaskit-wasm@^0.39.1: version "0.39.1" resolved "https://registry.yarnpkg.com/canvaskit-wasm/-/canvaskit-wasm-0.39.1.tgz#c3c8f3962cbabbedf246f7bcf90e859013c7eae9" integrity sha512-Gy3lCmhUdKq+8bvDrs9t8+qf7RvcjuQn+we7vTVVyqgOVO1UVfHpsnBxkTZw+R4ApEJ3D5fKySl9TU11hmjl/A== From 86a162dec1cda46cdc2411d3bfdba614220ef4eb Mon Sep 17 00:00:00 2001 From: Rob Walker Date: Tue, 13 Aug 2024 16:28:37 +0100 Subject: [PATCH 6/6] changeset --- .changeset/fair-bees-rush.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/fair-bees-rush.md diff --git a/.changeset/fair-bees-rush.md b/.changeset/fair-bees-rush.md new file mode 100644 index 00000000..3268b56b --- /dev/null +++ b/.changeset/fair-bees-rush.md @@ -0,0 +1,6 @@ +--- +"example": minor +"victory-native": minor +--- + +Added support for Expo web as a platform