react-native-wagmi-charts 2.1.0 → 2.3.0

package/lib/module/charts/line/useCurrentY.js

@@ -19,7 +19,7 @@ export function useCurrentY() {
 
     const boundedX = Math.min(width, currentX.value);
     return getYForX(parsedPath, boundedX) || 0;
-  });
+  }, [parsedPath, width, currentX]);
   return currentY;
 }
 //# sourceMappingURL=useCurrentY.js.map

package/lib/module/charts/line/useCurrentY.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCurrentY.ts"],"names":["useContext","useMemo","useDerivedValue","getYForX","parse","LineChartContext","LineChartDimensionsContext","useCurrentY","path","width","currentX","parsedPath","undefined","currentY","boundedX","Math","min","value"],"mappings":"AAAA,SAASA,UAAT,EAAqBC,OAArB,QAAoC,OAApC;AACA,SAASC,eAAT,QAAgC,yBAAhC;AACA,SAASC,QAAT,EAAmBC,KAAnB,QAAgC,qBAAhC;AACA,SAASC,gBAAT,QAAiC,WAAjC;AACA,SAASC,0BAAT,QAA2C,SAA3C;AAEA,OAAO,SAASC,WAAT,GAAuB;AAC5B,QAAM;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,MAAkBT,UAAU,CAACM,0BAAD,CAAlC;AACA,QAAM;AAAEI,IAAAA;AAAF,MAAeV,UAAU,CAACK,gBAAD,CAA/B;AACA,QAAMM,UAAU,GAAGV,OAAO,CAAC,MAAOO,IAAI,GAAGJ,KAAK,CAACI,IAAD,CAAR,GAAiBI,SAA7B,EAAyC,CAACJ,IAAD,CAAzC,CAA1B;AAEA,QAAMK,QAAQ,GAAGX,eAAe,CAAC,MAAM;AACrC,QAAI,CAACS,UAAL,EAAiB;AACf,aAAO,CAAC,CAAR;AACD;;AACD,UAAMG,QAAQ,GAAGC,IAAI,CAACC,GAAL,CAASP,KAAT,EAAgBC,QAAQ,CAACO,KAAzB,CAAjB;AACA,WAAOd,QAAQ,CAACQ,UAAD,EAAaG,QAAb,CAAR,IAAkC,CAAzC;AACD,GAN+B,CAAhC;AAQA,SAAOD,QAAP;AACD","sourcesContent":["import { useContext, useMemo } from 'react';\nimport { useDerivedValue } from 'react-native-reanimated';\nimport { getYForX, parse } from 'react-native-redash';\nimport { LineChartContext } from './Context';\nimport { LineChartDimensionsContext } from './Chart';\n\nexport function useCurrentY() {\n  const { path, width } = useContext(LineChartDimensionsContext);\n  const { currentX } = useContext(LineChartContext);\n  const parsedPath = useMemo(() => (path ? parse(path) : undefined), [path]);\n\n  const currentY = useDerivedValue(() => {\n    if (!parsedPath) {\n      return -1;\n    }\n    const boundedX = Math.min(width, currentX.value);\n    return getYForX(parsedPath, boundedX) || 0;\n  });\n\n  return currentY;\n}\n"]}
+{"version":3,"sources":["useCurrentY.ts"],"names":["useContext","useMemo","useDerivedValue","getYForX","parse","LineChartContext","LineChartDimensionsContext","useCurrentY","path","width","currentX","parsedPath","undefined","currentY","boundedX","Math","min","value"],"mappings":"AAAA,SAASA,UAAT,EAAqBC,OAArB,QAAoC,OAApC;AACA,SAASC,eAAT,QAAgC,yBAAhC;AACA,SAASC,QAAT,EAAmBC,KAAnB,QAAgC,qBAAhC;AACA,SAASC,gBAAT,QAAiC,WAAjC;AACA,SAASC,0BAAT,QAA2C,SAA3C;AAEA,OAAO,SAASC,WAAT,GAAuB;AAC5B,QAAM;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,MAAkBT,UAAU,CAACM,0BAAD,CAAlC;AACA,QAAM;AAAEI,IAAAA;AAAF,MAAeV,UAAU,CAACK,gBAAD,CAA/B;AACA,QAAMM,UAAU,GAAGV,OAAO,CAAC,MAAOO,IAAI,GAAGJ,KAAK,CAACI,IAAD,CAAR,GAAiBI,SAA7B,EAAyC,CAACJ,IAAD,CAAzC,CAA1B;AAEA,QAAMK,QAAQ,GAAGX,eAAe,CAAC,MAAM;AACrC,QAAI,CAACS,UAAL,EAAiB;AACf,aAAO,CAAC,CAAR;AACD;;AACD,UAAMG,QAAQ,GAAGC,IAAI,CAACC,GAAL,CAASP,KAAT,EAAgBC,QAAQ,CAACO,KAAzB,CAAjB;AACA,WAAOd,QAAQ,CAACQ,UAAD,EAAaG,QAAb,CAAR,IAAkC,CAAzC;AACD,GAN+B,EAM7B,CAACH,UAAD,EAAaF,KAAb,EAAoBC,QAApB,CAN6B,CAAhC;AAQA,SAAOG,QAAP;AACD","sourcesContent":["import { useContext, useMemo } from 'react';\nimport { useDerivedValue } from 'react-native-reanimated';\nimport { getYForX, parse } from 'react-native-redash';\nimport { LineChartContext } from './Context';\nimport { LineChartDimensionsContext } from './Chart';\n\nexport function useCurrentY() {\n  const { path, width } = useContext(LineChartDimensionsContext);\n  const { currentX } = useContext(LineChartContext);\n  const parsedPath = useMemo(() => (path ? parse(path) : undefined), [path]);\n\n  const currentY = useDerivedValue(() => {\n    if (!parsedPath) {\n      return -1;\n    }\n    const boundedX = Math.min(width, currentX.value);\n    return getYForX(parsedPath, boundedX) || 0;\n  }, [parsedPath, width, currentX]);\n\n  return currentY;\n}\n"]}

package/lib/module/charts/line/useDatetime.js

@@ -13,11 +13,11 @@ export function useLineChartDatetime({
   const timestamp = useDerivedValue(() => {
     if (typeof currentIndex.value === 'undefined' || currentIndex.value === -1) return '';
     return data[currentIndex.value].timestamp;
-  });
+  }, [currentIndex, data]);
   const timestampString = useDerivedValue(() => {
     if (timestamp.value === '') return '';
     return timestamp.value.toString();
-  });
+  }, [timestamp]);
   const formatted = useDerivedValue(() => {
     const formattedDatetime = timestamp.value ? formatDatetime({
       value: timestamp.value,
@@ -28,7 +28,7 @@ export function useLineChartDatetime({
       value: timestamp.value || -1,
       formatted: formattedDatetime
     }) : formattedDatetime;
-  });
+  }, [format, locale, options, timestamp]);
   return {
     value: timestampString,
     formatted

package/lib/module/charts/line/useDatetime.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDatetime.ts"],"names":["useDerivedValue","formatDatetime","useLineChart","useLineChartDatetime","format","locale","options","currentIndex","data","timestamp","value","timestampString","toString","formatted","formattedDatetime"],"mappings":"AAAA,SAASA,eAAT,QAAgC,yBAAhC;AAEA,SAASC,cAAT,QAA+B,aAA/B;AAEA,SAASC,YAAT,QAA6B,gBAA7B;AAEA,OAAO,SAASC,oBAAT,CAA8B;AACnCC,EAAAA,MADmC;AAEnCC,EAAAA,MAFmC;AAGnCC,EAAAA;AAHmC,IAQjC,EARG,EAQC;AACN,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,MAAyBN,YAAY,EAA3C;AAEA,QAAMO,SAAS,GAAGT,eAAe,CAAC,MAAM;AACtC,QAAI,OAAOO,YAAY,CAACG,KAApB,KAA8B,WAA9B,IAA6CH,YAAY,CAACG,KAAb,KAAuB,CAAC,CAAzE,EACE,OAAO,EAAP;AACF,WAAOF,IAAI,CAACD,YAAY,CAACG,KAAd,CAAJ,CAAyBD,SAAhC;AACD,GAJgC,CAAjC;AAMA,QAAME,eAAe,GAAGX,eAAe,CAAC,MAAM;AAC5C,QAAIS,SAAS,CAACC,KAAV,KAAoB,EAAxB,EAA4B,OAAO,EAAP;AAC5B,WAAOD,SAAS,CAACC,KAAV,CAAgBE,QAAhB,EAAP;AACD,GAHsC,CAAvC;AAKA,QAAMC,SAAS,GAAGb,eAAe,CAAC,MAAM;AACtC,UAAMc,iBAAiB,GAAGL,SAAS,CAACC,KAAV,GACtBT,cAAc,CAAC;AACbS,MAAAA,KAAK,EAAED,SAAS,CAACC,KADJ;AAEbL,MAAAA,MAFa;AAGbC,MAAAA;AAHa,KAAD,CADQ,GAMtB,EANJ;AAOA,WAAOF,MAAM,GACTA,MAAM,CAAC;AAAEM,MAAAA,KAAK,EAAED,SAAS,CAACC,KAAV,IAAmB,CAAC,CAA7B;AAAgCG,MAAAA,SAAS,EAAEC;AAA3C,KAAD,CADG,GAETA,iBAFJ;AAGD,GAXgC,CAAjC;AAaA,SAAO;AAAEJ,IAAAA,KAAK,EAAEC,eAAT;AAA0BE,IAAAA;AAA1B,GAAP;AACD","sourcesContent":["import { useDerivedValue } from 'react-native-reanimated';\n\nimport { formatDatetime } from '../../utils';\nimport type { TFormatterFn } from '../candle/types';\nimport { useLineChart } from './useLineChart';\n\nexport function useLineChartDatetime({\n  format,\n  locale,\n  options,\n}: {\n  format?: TFormatterFn<number>;\n  locale?: string;\n  options?: Intl.DateTimeFormatOptions;\n} = {}) {\n  const { currentIndex, data } = useLineChart();\n\n  const timestamp = useDerivedValue(() => {\n    if (typeof currentIndex.value === 'undefined' || currentIndex.value === -1)\n      return '';\n    return data[currentIndex.value].timestamp;\n  });\n\n  const timestampString = useDerivedValue(() => {\n    if (timestamp.value === '') return '';\n    return timestamp.value.toString();\n  });\n\n  const formatted = useDerivedValue(() => {\n    const formattedDatetime = timestamp.value\n      ? formatDatetime({\n          value: timestamp.value,\n          locale,\n          options,\n        })\n      : '';\n    return format\n      ? format({ value: timestamp.value || -1, formatted: formattedDatetime })\n      : formattedDatetime;\n  });\n\n  return { value: timestampString, formatted };\n}\n"]}
+{"version":3,"sources":["useDatetime.ts"],"names":["useDerivedValue","formatDatetime","useLineChart","useLineChartDatetime","format","locale","options","currentIndex","data","timestamp","value","timestampString","toString","formatted","formattedDatetime"],"mappings":"AAAA,SAASA,eAAT,QAAgC,yBAAhC;AAEA,SAASC,cAAT,QAA+B,aAA/B;AAEA,SAASC,YAAT,QAA6B,gBAA7B;AAEA,OAAO,SAASC,oBAAT,CAA8B;AACnCC,EAAAA,MADmC;AAEnCC,EAAAA,MAFmC;AAGnCC,EAAAA;AAHmC,IAQjC,EARG,EAQC;AACN,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,MAAyBN,YAAY,EAA3C;AAEA,QAAMO,SAAS,GAAGT,eAAe,CAAC,MAAM;AACtC,QAAI,OAAOO,YAAY,CAACG,KAApB,KAA8B,WAA9B,IAA6CH,YAAY,CAACG,KAAb,KAAuB,CAAC,CAAzE,EACE,OAAO,EAAP;AACF,WAAOF,IAAI,CAACD,YAAY,CAACG,KAAd,CAAJ,CAAyBD,SAAhC;AACD,GAJgC,EAI9B,CAACF,YAAD,EAAeC,IAAf,CAJ8B,CAAjC;AAMA,QAAMG,eAAe,GAAGX,eAAe,CAAC,MAAM;AAC5C,QAAIS,SAAS,CAACC,KAAV,KAAoB,EAAxB,EAA4B,OAAO,EAAP;AAC5B,WAAOD,SAAS,CAACC,KAAV,CAAgBE,QAAhB,EAAP;AACD,GAHsC,EAGpC,CAACH,SAAD,CAHoC,CAAvC;AAKA,QAAMI,SAAS,GAAGb,eAAe,CAAC,MAAM;AACtC,UAAMc,iBAAiB,GAAGL,SAAS,CAACC,KAAV,GACtBT,cAAc,CAAC;AACbS,MAAAA,KAAK,EAAED,SAAS,CAACC,KADJ;AAEbL,MAAAA,MAFa;AAGbC,MAAAA;AAHa,KAAD,CADQ,GAMtB,EANJ;AAOA,WAAOF,MAAM,GACTA,MAAM,CAAC;AAAEM,MAAAA,KAAK,EAAED,SAAS,CAACC,KAAV,IAAmB,CAAC,CAA7B;AAAgCG,MAAAA,SAAS,EAAEC;AAA3C,KAAD,CADG,GAETA,iBAFJ;AAGD,GAXgC,EAW9B,CAACV,MAAD,EAASC,MAAT,EAAiBC,OAAjB,EAA0BG,SAA1B,CAX8B,CAAjC;AAaA,SAAO;AAAEC,IAAAA,KAAK,EAAEC,eAAT;AAA0BE,IAAAA;AAA1B,GAAP;AACD","sourcesContent":["import { useDerivedValue } from 'react-native-reanimated';\n\nimport { formatDatetime } from '../../utils';\nimport type { TFormatterFn } from '../candle/types';\nimport { useLineChart } from './useLineChart';\n\nexport function useLineChartDatetime({\n  format,\n  locale,\n  options,\n}: {\n  format?: TFormatterFn<number>;\n  locale?: string;\n  options?: Intl.DateTimeFormatOptions;\n} = {}) {\n  const { currentIndex, data } = useLineChart();\n\n  const timestamp = useDerivedValue(() => {\n    if (typeof currentIndex.value === 'undefined' || currentIndex.value === -1)\n      return '';\n    return data[currentIndex.value].timestamp;\n  }, [currentIndex, data]);\n\n  const timestampString = useDerivedValue(() => {\n    if (timestamp.value === '') return '';\n    return timestamp.value.toString();\n  }, [timestamp]);\n\n  const formatted = useDerivedValue(() => {\n    const formattedDatetime = timestamp.value\n      ? formatDatetime({\n          value: timestamp.value,\n          locale,\n          options,\n        })\n      : '';\n    return format\n      ? format({ value: timestamp.value || -1, formatted: formattedDatetime })\n      : formattedDatetime;\n  }, [format, locale, options, timestamp]);\n\n  return { value: timestampString, formatted };\n}\n"]}

package/lib/module/charts/line/usePrice.js

@@ -3,18 +3,19 @@ import { formatPrice } from '../../utils';
 import { useLineChart } from './useLineChart';
 export function useLineChartPrice({
   format,
-  precision = 2
+  precision = 2,
+  index
 } = {}) {
   const {
     currentIndex,
     data
   } = useLineChart();
   const float = useDerivedValue(() => {
-    if (typeof currentIndex.value === 'undefined' || currentIndex.value === -1) return '';
+    if ((typeof currentIndex.value === 'undefined' || currentIndex.value === -1) && index == null) return '';
     let price = 0;
-    price = data[currentIndex.value].value;
+    price = data[Math.min(index !== null && index !== void 0 ? index : currentIndex.value, data.length - 1)].value;
     return price.toFixed(precision).toString();
-  });
+  }, [currentIndex, data, precision]);
   const formatted = useDerivedValue(() => {
     let value = float.value || '';
     const formattedPrice = value ? formatPrice({
@@ -24,7 +25,7 @@ export function useLineChartPrice({
       value,
       formatted: formattedPrice
     }) : formattedPrice;
-  });
+  }, [float, format]);
   return {
     value: float,
     formatted

package/lib/module/charts/line/usePrice.js.map

@@ -1 +1 @@
-{"version":3,"sources":["usePrice.ts"],"names":["useDerivedValue","formatPrice","useLineChart","useLineChartPrice","format","precision","currentIndex","data","float","value","price","toFixed","toString","formatted","formattedPrice"],"mappings":"AAAA,SAASA,eAAT,QAAgC,yBAAhC;AAEA,SAASC,WAAT,QAA4B,aAA5B;AAEA,SAASC,YAAT,QAA6B,gBAA7B;AAEA,OAAO,SAASC,iBAAT,CAA2B;AAChCC,EAAAA,MADgC;AAEhCC,EAAAA,SAAS,GAAG;AAFoB,IAGyB,EAHpD,EAGwD;AAC7D,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,MAAyBL,YAAY,EAA3C;AAEA,QAAMM,KAAK,GAAGR,eAAe,CAAC,MAAM;AAClC,QAAI,OAAOM,YAAY,CAACG,KAApB,KAA8B,WAA9B,IAA6CH,YAAY,CAACG,KAAb,KAAuB,CAAC,CAAzE,EACE,OAAO,EAAP;AACF,QAAIC,KAAK,GAAG,CAAZ;AACAA,IAAAA,KAAK,GAAGH,IAAI,CAACD,YAAY,CAACG,KAAd,CAAJ,CAAyBA,KAAjC;AACA,WAAOC,KAAK,CAACC,OAAN,CAAcN,SAAd,EAAyBO,QAAzB,EAAP;AACD,GAN4B,CAA7B;AAOA,QAAMC,SAAS,GAAGb,eAAe,CAAC,MAAM;AACtC,QAAIS,KAAK,GAAGD,KAAK,CAACC,KAAN,IAAe,EAA3B;AACA,UAAMK,cAAc,GAAGL,KAAK,GAAGR,WAAW,CAAC;AAAEQ,MAAAA;AAAF,KAAD,CAAd,GAA4B,EAAxD;AACA,WAAOL,MAAM,GACTA,MAAM,CAAC;AAAEK,MAAAA,KAAF;AAASI,MAAAA,SAAS,EAAEC;AAApB,KAAD,CADG,GAETA,cAFJ;AAGD,GANgC,CAAjC;AAQA,SAAO;AAAEL,IAAAA,KAAK,EAAED,KAAT;AAAgBK,IAAAA;AAAhB,GAAP;AACD","sourcesContent":["import { useDerivedValue } from 'react-native-reanimated';\n\nimport { formatPrice } from '../../utils';\nimport type { TFormatterFn } from '../candle/types';\nimport { useLineChart } from './useLineChart';\n\nexport function useLineChartPrice({\n  format,\n  precision = 2,\n}: { format?: TFormatterFn<string>; precision?: number } = {}) {\n  const { currentIndex, data } = useLineChart();\n\n  const float = useDerivedValue(() => {\n    if (typeof currentIndex.value === 'undefined' || currentIndex.value === -1)\n      return '';\n    let price = 0;\n    price = data[currentIndex.value].value;\n    return price.toFixed(precision).toString();\n  });\n  const formatted = useDerivedValue(() => {\n    let value = float.value || '';\n    const formattedPrice = value ? formatPrice({ value }) : '';\n    return format\n      ? format({ value, formatted: formattedPrice })\n      : formattedPrice;\n  });\n\n  return { value: float, formatted };\n}\n"]}
+{"version":3,"sources":["usePrice.ts"],"names":["useDerivedValue","formatPrice","useLineChart","useLineChartPrice","format","precision","index","currentIndex","data","float","value","price","Math","min","length","toFixed","toString","formatted","formattedPrice"],"mappings":"AAAA,SAASA,eAAT,QAAgC,yBAAhC;AAEA,SAASC,WAAT,QAA4B,aAA5B;AAEA,SAASC,YAAT,QAA6B,gBAA7B;AAEA,OAAO,SAASC,iBAAT,CAA2B;AAChCC,EAAAA,MADgC;AAEhCC,EAAAA,SAAS,GAAG,CAFoB;AAGhCC,EAAAA;AAHgC,IAIyC,EAJpE,EAIwE;AAC7E,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,MAAyBN,YAAY,EAA3C;AAEA,QAAMO,KAAK,GAAGT,eAAe,CAAC,MAAM;AAClC,QACE,CAAC,OAAOO,YAAY,CAACG,KAApB,KAA8B,WAA9B,IACCH,YAAY,CAACG,KAAb,KAAuB,CAAC,CAD1B,KAEAJ,KAAK,IAAI,IAHX,EAKE,OAAO,EAAP;AACF,QAAIK,KAAK,GAAG,CAAZ;AACAA,IAAAA,KAAK,GAAGH,IAAI,CAACI,IAAI,CAACC,GAAL,CAASP,KAAT,aAASA,KAAT,cAASA,KAAT,GAAkBC,YAAY,CAACG,KAA/B,EAAsCF,IAAI,CAACM,MAAL,GAAc,CAApD,CAAD,CAAJ,CAA6DJ,KAArE;AACA,WAAOC,KAAK,CAACI,OAAN,CAAcV,SAAd,EAAyBW,QAAzB,EAAP;AACD,GAV4B,EAU1B,CAACT,YAAD,EAAeC,IAAf,EAAqBH,SAArB,CAV0B,CAA7B;AAWA,QAAMY,SAAS,GAAGjB,eAAe,CAAC,MAAM;AACtC,QAAIU,KAAK,GAAGD,KAAK,CAACC,KAAN,IAAe,EAA3B;AACA,UAAMQ,cAAc,GAAGR,KAAK,GAAGT,WAAW,CAAC;AAAES,MAAAA;AAAF,KAAD,CAAd,GAA4B,EAAxD;AACA,WAAON,MAAM,GACTA,MAAM,CAAC;AAAEM,MAAAA,KAAF;AAASO,MAAAA,SAAS,EAAEC;AAApB,KAAD,CADG,GAETA,cAFJ;AAGD,GANgC,EAM9B,CAACT,KAAD,EAAQL,MAAR,CAN8B,CAAjC;AAQA,SAAO;AAAEM,IAAAA,KAAK,EAAED,KAAT;AAAgBQ,IAAAA;AAAhB,GAAP;AACD","sourcesContent":["import { useDerivedValue } from 'react-native-reanimated';\n\nimport { formatPrice } from '../../utils';\nimport type { TFormatterFn } from '../candle/types';\nimport { useLineChart } from './useLineChart';\n\nexport function useLineChartPrice({\n  format,\n  precision = 2,\n  index,\n}: { format?: TFormatterFn<string>; precision?: number; index?: number } = {}) {\n  const { currentIndex, data } = useLineChart();\n\n  const float = useDerivedValue(() => {\n    if (\n      (typeof currentIndex.value === 'undefined' ||\n        currentIndex.value === -1) &&\n      index == null\n    )\n      return '';\n    let price = 0;\n    price = data[Math.min(index ?? currentIndex.value, data.length - 1)].value;\n    return price.toFixed(precision).toString();\n  }, [currentIndex, data, precision]);\n  const formatted = useDerivedValue(() => {\n    let value = float.value || '';\n    const formattedPrice = value ? formatPrice({ value }) : '';\n    return format\n      ? format({ value, formatted: formattedPrice })\n      : formattedPrice;\n  }, [float, format]);\n\n  return { value: float, formatted };\n}\n"]}

package/lib/module/charts/line/utils/getArea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["getArea.ts"],"names":["shape","scaleLinear","getArea","data","width","height","gutter","_shape","yDomain","timestamps","map","_","i","scaleX","domain","Math","min","max","range","scaleY","area","x","y0","d","value","y1","curve"],"mappings":"AAAA;AACA,OAAO,KAAKA,KAAZ,MAAuB,UAAvB,C,CACA;;AACA,SAASC,WAAT,QAA4B,UAA5B;AAIA,OAAO,SAASC,OAAT,CAAiB;AACtBC,EAAAA,IADsB;AAEtBC,EAAAA,KAFsB;AAGtBC,EAAAA,MAHsB;AAItBC,EAAAA,MAJsB;AAKtBN,EAAAA,KAAK,EAAEO,MALe;AAMtBC,EAAAA;AANsB,CAAjB,EAcI;AACT,QAAMC,UAAU,GAAGN,IAAI,CAACO,GAAL,CAAS,CAACC,CAAD,EAAIC,CAAJ,KAAUA,CAAnB,CAAnB;AAEA,QAAMC,MAAM,GAAGZ,WAAW,GACvBa,MADY,CACL,CAACC,IAAI,CAACC,GAAL,CAAS,GAAGP,UAAZ,CAAD,EAA0BM,IAAI,CAACE,GAAL,CAAS,GAAGR,UAAZ,CAA1B,CADK,EAEZS,KAFY,CAEN,CAAC,CAAD,EAAId,KAAJ,CAFM,CAAf;AAGA,QAAMe,MAAM,GAAGlB,WAAW,GACvBa,MADY,CACL,CAACN,OAAO,CAACQ,GAAT,EAAcR,OAAO,CAACS,GAAtB,CADK,EAEZC,KAFY,CAEN,CAACb,MAAM,GAAGC,MAAV,EAAkBA,MAAlB,CAFM,CAAf;AAGA,QAAMc,IAAI,GAAGpB,KAAK,CACfoB,IADU,GAEVC,CAFU,CAER,CAACV,CAAD,EAAaC,CAAb,KAA2BC,MAAM,CAACD,CAAD,CAFzB,EAGVU,EAHU,CAGNC,CAAD,IAA2BJ,MAAM,CAACI,CAAC,CAACC,KAAH,CAH1B,EAIVC,EAJU,CAIP,MAAMpB,MAJC,EAKVqB,KALU,CAKJnB,MALI,EAKIJ,IALJ,CAAb;AAMA,SAAOiB,IAAP;AACD","sourcesContent":["// @ts-ignore\nimport * as shape from 'd3-shape';\n// @ts-ignore\nimport { scaleLinear } from 'd3-scale';\n\nimport type { TLineChartData, YDomain } from '../types';\n\nexport function getArea({\n  data,\n  width,\n  height,\n  gutter,\n  shape: _shape,\n  yDomain,\n}: {\n  data: TLineChartData;\n  width: number;\n  height: number;\n  gutter: number;\n  shape?: unknown;\n  yDomain: YDomain;\n}): string {\n  const timestamps = data.map((_, i) => i);\n\n  const scaleX = scaleLinear()\n    .domain([Math.min(...timestamps), Math.max(...timestamps)])\n    .range([0, width]);\n  const scaleY = scaleLinear()\n    .domain([yDomain.min, yDomain.max])\n    .range([height - gutter, gutter]);\n  const area = shape\n    .area()\n    .x((_: unknown, i: number) => scaleX(i))\n    .y0((d: { value: unknown }) => scaleY(d.value))\n    .y1(() => height)\n    .curve(_shape)(data);\n  return area;\n}\n"]}
+{"version":3,"sources":["getArea.ts"],"names":["shape","scaleLinear","getArea","data","width","height","gutter","_shape","yDomain","timestamps","map","_","i","scaleX","domain","Math","min","max","range","scaleY","area","x","y0","d","value","y1","curve"],"mappings":"AAAA;AACA,OAAO,KAAKA,KAAZ,MAAuB,UAAvB,C,CACA;;AACA,SAASC,WAAT,QAA4B,UAA5B;AAIA,OAAO,SAASC,OAAT,CAAiB;AACtBC,EAAAA,IADsB;AAEtBC,EAAAA,KAFsB;AAGtBC,EAAAA,MAHsB;AAItBC,EAAAA,MAJsB;AAKtBN,EAAAA,KAAK,EAAEO,MALe;AAMtBC,EAAAA;AANsB,CAAjB,EAcI;AACT,QAAMC,UAAU,GAAGN,IAAI,CAACO,GAAL,CAAS,CAACC,CAAD,EAAIC,CAAJ,KAAUA,CAAnB,CAAnB;AAEA,QAAMC,MAAM,GAAGZ,WAAW,GACvBa,MADY,CACL,CAACC,IAAI,CAACC,GAAL,CAAS,GAAGP,UAAZ,CAAD,EAA0BM,IAAI,CAACE,GAAL,CAAS,GAAGR,UAAZ,CAA1B,CADK,EAEZS,KAFY,CAEN,CAAC,CAAD,EAAId,KAAJ,CAFM,CAAf;AAGA,QAAMe,MAAM,GAAGlB,WAAW,GACvBa,MADY,CACL,CAACN,OAAO,CAACQ,GAAT,EAAcR,OAAO,CAACS,GAAtB,CADK,EAEZC,KAFY,CAEN,CAACb,MAAM,GAAGC,MAAV,EAAkBA,MAAlB,CAFM,CAAf;AAGA,QAAMc,IAAI,GAAGpB,KAAK,CACfoB,IADU,GAEVC,CAFU,CAER,CAACV,CAAD,EAAaC,CAAb,KAA2BC,MAAM,CAACD,CAAD,CAFzB,EAGVU,EAHU,CAGNC,CAAD,IAA2BJ,MAAM,CAACI,CAAC,CAACC,KAAH,CAH1B,EAIVC,EAJU,CAIP,MAAMpB,MAJC,EAKVqB,KALU,CAKJnB,MALI,EAKIJ,IALJ,CAAb;AAMA,SAAOiB,IAAP;AACD","sourcesContent":["// @ts-ignore\nimport * as shape from 'd3-shape';\n// @ts-ignore\nimport { scaleLinear } from 'd3-scale';\n\nimport type { TLineChartData, YDomain } from '../types';\n\nexport function getArea({\n  data,\n  width,\n  height,\n  gutter,\n  shape: _shape,\n  yDomain,\n}: {\n  data: TLineChartData;\n  width: number;\n  height: number;\n  gutter: number;\n  shape?: unknown;\n  yDomain: YDomain;\n}): string {\n  const timestamps = data.map((_, i) => i);\n\n  const scaleX = scaleLinear()\n    .domain([Math.min(...timestamps), Math.max(...timestamps)])\n    .range([0, width]);\n  const scaleY = scaleLinear()\n    .domain([yDomain.min, yDomain.max])\n    .range([height - gutter, gutter]);\n  const area = shape\n    .area()\n    .x((_: unknown, i: number) => scaleX(i))\n    .y0((d: { value: unknown }) => scaleY(d.value as number))\n    .y1(() => height)\n    .curve(_shape)(data);\n  return area;\n}\n"]}

package/lib/module/charts/line/utils/getPath.js

@@ -10,12 +10,15 @@ export function getPath({
   height,
   gutter,
   shape: _shape,
-  yDomain
+  yDomain,
+  xDomain
 }) {
-  const timestamps = data.map((_, i) => i);
-  const scaleX = scaleLinear().domain([Math.min(...timestamps), Math.max(...timestamps)]).range([0, width]);
+  const timestamps = data.map(({
+    timestamp
+  }, i) => xDomain ? timestamp : i);
+  const scaleX = scaleLinear().domain(xDomain !== null && xDomain !== void 0 ? xDomain : [Math.min(...timestamps), Math.max(...timestamps)]).range([0, width]);
   const scaleY = scaleLinear().domain([yDomain.min, yDomain.max]).range([height - gutter, gutter]);
-  const path = shape.line().defined(d => from || to ? data.slice(from, to ? to + 1 : undefined).find(item => item.timestamp === d.timestamp) : true).x((_, i) => scaleX(i)).y(d => scaleY(d.value)).curve(_shape)(data);
+  const path = shape.line().defined(d => from || to ? data.slice(from, to ? to + 1 : undefined).find(item => item.timestamp === d.timestamp) : true).x((_, i) => scaleX(xDomain ? timestamps[i] : i)).y(d => scaleY(d.value)).curve(_shape)(data);
   return path;
 }
 //# sourceMappingURL=getPath.js.map

package/lib/module/charts/line/utils/getPath.js.map

@@ -1 +1 @@
-{"version":3,"sources":["getPath.ts"],"names":["shape","scaleLinear","getPath","data","from","to","width","height","gutter","_shape","yDomain","timestamps","map","_","i","scaleX","domain","Math","min","max","range","scaleY","path","line","defined","d","slice","undefined","find","item","timestamp","x","y","value","curve"],"mappings":"AAAA;AACA,OAAO,KAAKA,KAAZ,MAAuB,UAAvB,C,CACA;;AACA,SAASC,WAAT,QAA4B,UAA5B;AAIA,OAAO,SAASC,OAAT,CAAiB;AACtBC,EAAAA,IADsB;AAEtBC,EAAAA,IAFsB;AAGtBC,EAAAA,EAHsB;AAItBC,EAAAA,KAJsB;AAKtBC,EAAAA,MALsB;AAMtBC,EAAAA,MANsB;AAOtBR,EAAAA,KAAK,EAAES,MAPe;AAQtBC,EAAAA;AARsB,CAAjB,EAkBI;AACT,QAAMC,UAAU,GAAGR,IAAI,CAACS,GAAL,CAAS,CAACC,CAAD,EAAIC,CAAJ,KAAUA,CAAnB,CAAnB;AAEA,QAAMC,MAAM,GAAGd,WAAW,GACvBe,MADY,CACL,CAACC,IAAI,CAACC,GAAL,CAAS,GAAGP,UAAZ,CAAD,EAA0BM,IAAI,CAACE,GAAL,CAAS,GAAGR,UAAZ,CAA1B,CADK,EAEZS,KAFY,CAEN,CAAC,CAAD,EAAId,KAAJ,CAFM,CAAf;AAGA,QAAMe,MAAM,GAAGpB,WAAW,GACvBe,MADY,CACL,CAACN,OAAO,CAACQ,GAAT,EAAcR,OAAO,CAACS,GAAtB,CADK,EAEZC,KAFY,CAEN,CAACb,MAAM,GAAGC,MAAV,EAAkBA,MAAlB,CAFM,CAAf;AAGA,QAAMc,IAAI,GAAGtB,KAAK,CACfuB,IADU,GAEVC,OAFU,CAEDC,CAAD,IACPrB,IAAI,IAAIC,EAAR,GACIF,IAAI,CACDuB,KADH,CACStB,IADT,EACeC,EAAE,GAAGA,EAAE,GAAG,CAAR,GAAYsB,SAD7B,EAEGC,IAFH,CAESC,IAAD,IAAUA,IAAI,CAACC,SAAL,KAAmBL,CAAC,CAACK,SAFvC,CADJ,GAII,IAPK,EASVC,CATU,CASR,CAAClB,CAAD,EAAaC,CAAb,KAA2BC,MAAM,CAACD,CAAD,CATzB,EAUVkB,CAVU,CAUPP,CAAD,IAA0BJ,MAAM,CAACI,CAAC,CAACQ,KAAH,CAVxB,EAWVC,KAXU,CAWJzB,MAXI,EAWIN,IAXJ,CAAb;AAYA,SAAOmB,IAAP;AACD","sourcesContent":["// @ts-ignore\nimport * as shape from 'd3-shape';\n// @ts-ignore\nimport { scaleLinear } from 'd3-scale';\n\nimport type { TLineChartData, YDomain } from '../types';\n\nexport function getPath({\n  data,\n  from,\n  to,\n  width,\n  height,\n  gutter,\n  shape: _shape,\n  yDomain,\n}: {\n  data: TLineChartData;\n  from?: number;\n  to?: number;\n  width: number;\n  height: number;\n  gutter: number;\n  shape?: unknown;\n  yDomain: YDomain;\n}): string {\n  const timestamps = data.map((_, i) => i);\n\n  const scaleX = scaleLinear()\n    .domain([Math.min(...timestamps), Math.max(...timestamps)])\n    .range([0, width]);\n  const scaleY = scaleLinear()\n    .domain([yDomain.min, yDomain.max])\n    .range([height - gutter, gutter]);\n  const path = shape\n    .line()\n    .defined((d: { timestamp: number }) =>\n      from || to\n        ? data\n            .slice(from, to ? to + 1 : undefined)\n            .find((item) => item.timestamp === d.timestamp)\n        : true\n    )\n    .x((_: unknown, i: number) => scaleX(i))\n    .y((d: { value: number }) => scaleY(d.value))\n    .curve(_shape)(data);\n  return path;\n}\n"]}
+{"version":3,"sources":["getPath.ts"],"names":["shape","scaleLinear","getPath","data","from","to","width","height","gutter","_shape","yDomain","xDomain","timestamps","map","timestamp","i","scaleX","domain","Math","min","max","range","scaleY","path","line","defined","d","slice","undefined","find","item","x","_","y","value","curve"],"mappings":"AAAA;AACA,OAAO,KAAKA,KAAZ,MAAuB,UAAvB,C,CACA;;AACA,SAASC,WAAT,QAA4B,UAA5B;AAIA,OAAO,SAASC,OAAT,CAAiB;AACtBC,EAAAA,IADsB;AAEtBC,EAAAA,IAFsB;AAGtBC,EAAAA,EAHsB;AAItBC,EAAAA,KAJsB;AAKtBC,EAAAA,MALsB;AAMtBC,EAAAA,MANsB;AAOtBR,EAAAA,KAAK,EAAES,MAPe;AAQtBC,EAAAA,OARsB;AAStBC,EAAAA;AATsB,CAAjB,EAoBI;AACT,QAAMC,UAAU,GAAGT,IAAI,CAACU,GAAL,CAAS,CAAC;AAAEC,IAAAA;AAAF,GAAD,EAAgBC,CAAhB,KAAuBJ,OAAO,GAAGG,SAAH,GAAeC,CAAtD,CAAnB;AAEA,QAAMC,MAAM,GAAGf,WAAW,GACvBgB,MADY,CACLN,OADK,aACLA,OADK,cACLA,OADK,GACM,CAACO,IAAI,CAACC,GAAL,CAAS,GAAGP,UAAZ,CAAD,EAA0BM,IAAI,CAACE,GAAL,CAAS,GAAGR,UAAZ,CAA1B,CADN,EAEZS,KAFY,CAEN,CAAC,CAAD,EAAIf,KAAJ,CAFM,CAAf;AAGA,QAAMgB,MAAM,GAAGrB,WAAW,GACvBgB,MADY,CACL,CAACP,OAAO,CAACS,GAAT,EAAcT,OAAO,CAACU,GAAtB,CADK,EAEZC,KAFY,CAEN,CAACd,MAAM,GAAGC,MAAV,EAAkBA,MAAlB,CAFM,CAAf;AAGA,QAAMe,IAAI,GAAGvB,KAAK,CACfwB,IADU,GAEVC,OAFU,CAEDC,CAAD,IACPtB,IAAI,IAAIC,EAAR,GACIF,IAAI,CACDwB,KADH,CACSvB,IADT,EACeC,EAAE,GAAGA,EAAE,GAAG,CAAR,GAAYuB,SAD7B,EAEGC,IAFH,CAESC,IAAD,IAAUA,IAAI,CAAChB,SAAL,KAAmBY,CAAC,CAACZ,SAFvC,CADJ,GAII,IAPK,EASViB,CATU,CASR,CAACC,CAAD,EAAajB,CAAb,KAA2BC,MAAM,CAACL,OAAO,GAAGC,UAAU,CAACG,CAAD,CAAb,GAAmBA,CAA3B,CATzB,EAUVkB,CAVU,CAUPP,CAAD,IAA0BJ,MAAM,CAACI,CAAC,CAACQ,KAAH,CAVxB,EAWVC,KAXU,CAWJ1B,MAXI,EAWIN,IAXJ,CAAb;AAYA,SAAOoB,IAAP;AACD","sourcesContent":["// @ts-ignore\nimport * as shape from 'd3-shape';\n// @ts-ignore\nimport { scaleLinear } from 'd3-scale';\n\nimport type { TLineChartData, YDomain } from '../types';\n\nexport function getPath({\n  data,\n  from,\n  to,\n  width,\n  height,\n  gutter,\n  shape: _shape,\n  yDomain,\n  xDomain,\n}: {\n  data: TLineChartData;\n  from?: number;\n  to?: number;\n  width: number;\n  height: number;\n  gutter: number;\n  shape?: unknown;\n  yDomain: YDomain;\n  xDomain?: [number, number];\n}): string {\n  const timestamps = data.map(({ timestamp }, i) => (xDomain ? timestamp : i));\n\n  const scaleX = scaleLinear()\n    .domain(xDomain ?? [Math.min(...timestamps), Math.max(...timestamps)])\n    .range([0, width]);\n  const scaleY = scaleLinear()\n    .domain([yDomain.min, yDomain.max])\n    .range([height - gutter, gutter]);\n  const path = shape\n    .line()\n    .defined((d: { timestamp: number }) =>\n      from || to\n        ? data\n            .slice(from, to ? to + 1 : undefined)\n            .find((item) => item.timestamp === d.timestamp)\n        : true\n    )\n    .x((_: unknown, i: number) => scaleX(xDomain ? timestamps[i] : i))\n    .y((d: { value: number }) => scaleY(d.value))\n    .curve(_shape)(data);\n  return path;\n}\n"]}

package/lib/module/components/AnimatedText.js

@@ -25,7 +25,7 @@ export const AnimatedText = ({
       if (data !== prevData && inputRef.current) {
         inputRef.current.value = data;
       }
-    });
+    }, [text]);
   }
 
   const animatedProps = useAnimatedProps(() => {

package/lib/module/components/AnimatedText.js.map

@@ -1 +1 @@
-{"version":3,"sources":["AnimatedText.tsx"],"names":["React","Platform","StyleSheet","TextInput","Animated","useAnimatedProps","useAnimatedReaction","addWhitelistedNativeProps","text","AnimatedTextInput","createAnimatedComponent","AnimatedText","style","inputRef","useRef","OS","value","data","prevData","current","animatedProps","select","web","styles","create","color"],"mappings":"AAAA;AAEA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,QAAT,EAAmBC,UAAnB,QAA+D,cAA/D;AACA,SAASC,SAAT,QAA0B,cAA1B;AACA,OAAOC,QAAP,IACEC,gBADF,EAEEC,mBAFF,QAGO,yBAHP;AAKAF,QAAQ,CAACG,yBAAT,CAAmC;AAAEC,EAAAA,IAAI,EAAE;AAAR,CAAnC;AAOA,MAAMC,iBAAiB,GAAGL,QAAQ,CAACM,uBAAT,CAAiCP,SAAjC,CAA1B;AAEA,OAAO,MAAMQ,YAAY,GAAG,CAAC;AAAEH,EAAAA,IAAF;AAAQI,EAAAA;AAAR,CAAD,KAAwC;AAClE,QAAMC,QAAQ,GAAGb,KAAK,CAACc,MAAN,CAAkB,IAAlB,CAAjB,CADkE,CACxB;;AAE1C,MAAIb,QAAQ,CAACc,EAAT,KAAgB,KAApB,EAA2B;AACzB;AACA;AACA;AACA;AAEA;AACAT,IAAAA,mBAAmB,CACjB,MAAM;AACJ,aAAOE,IAAI,CAACQ,KAAZ;AACD,KAHgB,EAIjB,CAACC,IAAD,EAAOC,QAAP,KAAoB;AAClB,UAAID,IAAI,KAAKC,QAAT,IAAqBL,QAAQ,CAACM,OAAlC,EAA2C;AACzCN,QAAAA,QAAQ,CAACM,OAAT,CAAiBH,KAAjB,GAAyBC,IAAzB;AACD;AACF,KARgB,CAAnB;AAUD;;AACD,QAAMG,aAAa,GAAGf,gBAAgB,CAAC,MAAM;AAC3C,WAAO;AACLG,MAAAA,IAAI,EAAEA,IAAI,CAACQ,KADN,CAEL;AACA;;AAHK,KAAP;AAKD,GANqC,CAAtC;AAOA,sBACE,oBAAC,iBAAD;AACE,IAAA,qBAAqB,EAAC,aADxB;AAEE,IAAA,QAAQ,EAAE,KAFZ;AAGE,IAAA,GAAG,EAAEf,QAAQ,CAACoB,MAAT,CAAgB;AAAEC,MAAAA,GAAG,EAAET;AAAP,KAAhB,CAHP;AAIE,IAAA,KAAK,EAAEL,IAAI,CAACQ,KAJd;AAKE,IAAA,KAAK,EAAE,CAACO,MAAM,CAACf,IAAR,EAAcI,KAAd,CALT;AAME,IAAA,aAAa,EAAEQ;AANjB,IADF;AAUD,CAtCM;AAwCP,MAAMG,MAAM,GAAGrB,UAAU,CAACsB,MAAX,CAAkB;AAC/BhB,EAAAA,IAAI,EAAE;AACJiB,IAAAA,KAAK,EAAE;AADH;AADyB,CAAlB,CAAf","sourcesContent":["// forked from https://github.com/wcandillon/react-native-redash/blob/master/src/ReText.tsx\n\nimport React from 'react';\nimport { Platform, StyleSheet, TextProps as RNTextProps } from 'react-native';\nimport { TextInput } from 'react-native';\nimport Animated, {\n  useAnimatedProps,\n  useAnimatedReaction,\n} from 'react-native-reanimated';\n\nAnimated.addWhitelistedNativeProps({ text: true });\n\ninterface AnimatedTextProps {\n  text: Animated.SharedValue<string>;\n  style?: Animated.AnimateProps<RNTextProps>['style'];\n}\n\nconst AnimatedTextInput = Animated.createAnimatedComponent(TextInput);\n\nexport const AnimatedText = ({ text, style }: AnimatedTextProps) => {\n  const inputRef = React.useRef<any>(null); // eslint-disable-line @typescript-eslint/no-explicit-any\n\n  if (Platform.OS === 'web') {\n    // For some reason, the worklet reaction evaluates upfront regardless of any\n    // conditionals within it, causing Android to crash upon the invokation of `setNativeProps`.\n    // We are going to break the rules of hooks here so it doesn't invoke `useAnimatedReaction`\n    // for platforms outside of the web.\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useAnimatedReaction(\n      () => {\n        return text.value;\n      },\n      (data, prevData) => {\n        if (data !== prevData && inputRef.current) {\n          inputRef.current.value = data;\n        }\n      }\n    );\n  }\n  const animatedProps = useAnimatedProps(() => {\n    return {\n      text: text.value,\n      // Here we use any because the text prop is not available in the type\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    } as any;\n  });\n  return (\n    <AnimatedTextInput\n      underlineColorAndroid=\"transparent\"\n      editable={false}\n      ref={Platform.select({ web: inputRef })}\n      value={text.value}\n      style={[styles.text, style]}\n      animatedProps={animatedProps}\n    />\n  );\n};\n\nconst styles = StyleSheet.create({\n  text: {\n    color: 'black',\n  },\n});\n"]}
+{"version":3,"sources":["AnimatedText.tsx"],"names":["React","Platform","StyleSheet","TextInput","Animated","useAnimatedProps","useAnimatedReaction","addWhitelistedNativeProps","text","AnimatedTextInput","createAnimatedComponent","AnimatedText","style","inputRef","useRef","OS","value","data","prevData","current","animatedProps","select","web","styles","create","color"],"mappings":"AAAA;AAEA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,QAAT,EAAmBC,UAAnB,QAA+D,cAA/D;AACA,SAASC,SAAT,QAA0B,cAA1B;AACA,OAAOC,QAAP,IACEC,gBADF,EAEEC,mBAFF,QAGO,yBAHP;AAKAF,QAAQ,CAACG,yBAAT,CAAmC;AAAEC,EAAAA,IAAI,EAAE;AAAR,CAAnC;AAOA,MAAMC,iBAAiB,GAAGL,QAAQ,CAACM,uBAAT,CAAiCP,SAAjC,CAA1B;AAEA,OAAO,MAAMQ,YAAY,GAAG,CAAC;AAAEH,EAAAA,IAAF;AAAQI,EAAAA;AAAR,CAAD,KAAwC;AAClE,QAAMC,QAAQ,GAAGb,KAAK,CAACc,MAAN,CAAkB,IAAlB,CAAjB,CADkE,CACxB;;AAE1C,MAAIb,QAAQ,CAACc,EAAT,KAAgB,KAApB,EAA2B;AACzB;AACA;AACA;AACA;AAEA;AACAT,IAAAA,mBAAmB,CACjB,MAAM;AACJ,aAAOE,IAAI,CAACQ,KAAZ;AACD,KAHgB,EAIjB,CAACC,IAAD,EAAOC,QAAP,KAAoB;AAClB,UAAID,IAAI,KAAKC,QAAT,IAAqBL,QAAQ,CAACM,OAAlC,EAA2C;AACzCN,QAAAA,QAAQ,CAACM,OAAT,CAAiBH,KAAjB,GAAyBC,IAAzB;AACD;AACF,KARgB,EASjB,CAACT,IAAD,CATiB,CAAnB;AAWD;;AACD,QAAMY,aAAa,GAAGf,gBAAgB,CAAC,MAAM;AAC3C,WAAO;AACLG,MAAAA,IAAI,EAAEA,IAAI,CAACQ,KADN,CAEL;AACA;;AAHK,KAAP;AAKD,GANqC,CAAtC;AAOA,sBACE,oBAAC,iBAAD;AACE,IAAA,qBAAqB,EAAC,aADxB;AAEE,IAAA,QAAQ,EAAE,KAFZ;AAGE,IAAA,GAAG,EAAEf,QAAQ,CAACoB,MAAT,CAAgB;AAAEC,MAAAA,GAAG,EAAET;AAAP,KAAhB,CAHP;AAIE,IAAA,KAAK,EAAEL,IAAI,CAACQ,KAJd;AAKE,IAAA,KAAK,EAAE,CAACO,MAAM,CAACf,IAAR,EAAcI,KAAd,CALT;AAME,IAAA,aAAa,EAAEQ;AANjB,IADF;AAUD,CAvCM;AAyCP,MAAMG,MAAM,GAAGrB,UAAU,CAACsB,MAAX,CAAkB;AAC/BhB,EAAAA,IAAI,EAAE;AACJiB,IAAAA,KAAK,EAAE;AADH;AADyB,CAAlB,CAAf","sourcesContent":["// forked from https://github.com/wcandillon/react-native-redash/blob/master/src/ReText.tsx\n\nimport React from 'react';\nimport { Platform, StyleSheet, TextProps as RNTextProps } from 'react-native';\nimport { TextInput } from 'react-native';\nimport Animated, {\n  useAnimatedProps,\n  useAnimatedReaction,\n} from 'react-native-reanimated';\n\nAnimated.addWhitelistedNativeProps({ text: true });\n\ninterface AnimatedTextProps {\n  text: Animated.SharedValue<string>;\n  style?: Animated.AnimateProps<RNTextProps>['style'];\n}\n\nconst AnimatedTextInput = Animated.createAnimatedComponent(TextInput);\n\nexport const AnimatedText = ({ text, style }: AnimatedTextProps) => {\n  const inputRef = React.useRef<any>(null); // eslint-disable-line @typescript-eslint/no-explicit-any\n\n  if (Platform.OS === 'web') {\n    // For some reason, the worklet reaction evaluates upfront regardless of any\n    // conditionals within it, causing Android to crash upon the invokation of `setNativeProps`.\n    // We are going to break the rules of hooks here so it doesn't invoke `useAnimatedReaction`\n    // for platforms outside of the web.\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useAnimatedReaction(\n      () => {\n        return text.value;\n      },\n      (data, prevData) => {\n        if (data !== prevData && inputRef.current) {\n          inputRef.current.value = data;\n        }\n      },\n      [text]\n    );\n  }\n  const animatedProps = useAnimatedProps(() => {\n    return {\n      text: text.value,\n      // Here we use any because the text prop is not available in the type\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    } as any;\n  });\n  return (\n    <AnimatedTextInput\n      underlineColorAndroid=\"transparent\"\n      editable={false}\n      ref={Platform.select({ web: inputRef })}\n      value={text.value}\n      style={[styles.text, style]}\n      animatedProps={animatedProps}\n    />\n  );\n};\n\nconst styles = StyleSheet.create({\n  text: {\n    color: 'black',\n  },\n});\n"]}

package/lib/typescript/src/charts/line/Chart.d.ts

@@ -1,8 +1,11 @@
 import * as React from 'react';
 import { ViewProps } from 'react-native';
+import { Path } from 'react-native-redash';
 export declare const LineChartDimensionsContext: React.Context<{
     width: number;
     height: number;
+    pointWidth: number;
+    parsedPath: Path;
     path: string;
     area: string;
     shape: any;

package/lib/typescript/src/charts/line/ChartPath.d.ts

@@ -1,11 +1,6 @@
 import * as React from 'react';
 import { WithTimingConfig } from 'react-native-reanimated';
 import { LineChartPathProps } from './Path';
-export declare const LineChartPathContext: React.Context<{
-    color: string;
-    isInactive: boolean;
-    isTransitionEnabled: boolean;
-}>;
 declare type LineChartPathWrapperProps = {
     animationDuration?: number;
     animationProps?: Omit<Partial<WithTimingConfig>, 'duration'>;

package/lib/typescript/src/charts/line/Context.d.ts

@@ -8,8 +8,9 @@ declare type LineChartProviderProps = {
     yRange?: YRangeProp;
     onCurrentIndexChange?: (x: number) => void;
     xLength?: number;
+    xDomain?: [number, number];
 };
-export declare function LineChartProvider({ children, data, yRange, onCurrentIndexChange, xLength, }: LineChartProviderProps): JSX.Element;
+export declare function LineChartProvider({ children, data, yRange, onCurrentIndexChange, xLength, xDomain, }: LineChartProviderProps): JSX.Element;
 export declare namespace LineChartProvider {
     var displayName: string;
 }

package/lib/typescript/src/charts/line/Cursor.d.ts

@@ -3,11 +3,12 @@ import { LongPressGestureHandlerProps } from 'react-native-gesture-handler';
 export declare type LineChartCursorProps = LongPressGestureHandlerProps & {
     children: React.ReactNode;
     type: 'line' | 'crosshair';
+    snapToPoint?: boolean;
 };
 export declare const CursorContext: React.Context<{
     type: string;
 }>;
-export declare function LineChartCursor({ children, type, ...props }: LineChartCursorProps): JSX.Element;
+export declare function LineChartCursor({ children, snapToPoint, type, ...props }: LineChartCursorProps): JSX.Element;
 export declare namespace LineChartCursor {
     var displayName: string;
 }

package/lib/typescript/src/charts/line/CursorLine.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
 import { LineProps } from 'react-native-svg';
+import { LineChartCursorProps } from './Cursor';
 declare type LineChartCursorLineProps = {
     children?: React.ReactNode;
     color?: string;
     lineProps?: Partial<LineProps>;
-};
-export declare function LineChartCursorLine({ children, color, lineProps, }: LineChartCursorLineProps): JSX.Element;
+} & Omit<LineChartCursorProps, 'type' | 'children'>;
+export declare function LineChartCursorLine({ children, color, lineProps, ...cursorProps }: LineChartCursorLineProps): JSX.Element;
 export declare namespace LineChartCursorLine {
     var displayName: string;
 }

package/lib/typescript/src/charts/line/LineChartPathContext.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const LineChartPathContext: React.Context<{
+    color: string;
+    isInactive: boolean;
+    isTransitionEnabled: boolean;
+}>;

package/lib/typescript/src/charts/line/PriceText.d.ts

@@ -7,8 +7,13 @@ export declare type LineChartPriceTextProps = {
     precision?: number;
     variant?: 'formatted' | 'value';
     style?: Animated.AnimateProps<RNTextProps>['style'];
+    /**
+     * By default, it will use the current active index from the chart.
+     * If this is set it will use the index provided.
+     */
+    index?: number;
 };
-export declare function LineChartPriceText({ format, precision, variant, style, }: LineChartPriceTextProps): JSX.Element;
+export declare function LineChartPriceText({ format, precision, variant, style, index, }: LineChartPriceTextProps): JSX.Element;
 export declare namespace LineChartPriceText {
     var displayName: string;
 }

package/lib/typescript/src/charts/line/Tooltip.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { ViewProps } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { LineChartPriceTextProps } from './PriceText';
-declare type LineChartTooltipProps = Animated.AnimateProps<ViewProps> & {
+export declare type LineChartTooltipProps = Animated.AnimateProps<ViewProps> & {
     children?: React.ReactNode;
     xGutter?: number;
     yGutter?: number;
@@ -10,9 +10,16 @@ declare type LineChartTooltipProps = Animated.AnimateProps<ViewProps> & {
     position?: 'top' | 'bottom';
     textProps?: LineChartPriceTextProps;
     textStyle?: LineChartPriceTextProps['style'];
+    /**
+     * When specified the tooltip is considered static, and will
+     * always be rendered at the given index, unless there is interaction
+     * with the chart (like interacting with a cursor).
+     *
+     * @default undefined
+     */
+    at?: number;
 };
-export declare function LineChartTooltip({ children, xGutter, yGutter, cursorGutter, position, textProps, textStyle, ...props }: LineChartTooltipProps): JSX.Element;
+export declare function LineChartTooltip({ children, xGutter, yGutter, cursorGutter, position, textProps, textStyle, at, ...props }: LineChartTooltipProps): JSX.Element;
 export declare namespace LineChartTooltip {
     var displayName: string;
 }
-export {};

package/lib/typescript/src/charts/line/types.d.ts

@@ -15,6 +15,7 @@ export declare type TLineChartContext = {
     domain: TLineChartDomain;
     yDomain: YDomain;
     xLength: number;
+    xDomain?: [number, number] | undefined;
 };
 export declare type YRangeProp = {
     min?: number;

package/lib/typescript/src/charts/line/useLineChart.d.ts

@@ -15,4 +15,5 @@ export declare function useLineChart(): {
     domain: import("./types").TLineChartDomain;
     yDomain: import("./types").YDomain;
     xLength: number;
+    xDomain?: [number, number] | undefined;
 };

package/lib/typescript/src/charts/line/usePrice.d.ts

@@ -1,7 +1,8 @@
 import type { TFormatterFn } from '../candle/types';
-export declare function useLineChartPrice({ format, precision, }?: {
+export declare function useLineChartPrice({ format, precision, index, }?: {
     format?: TFormatterFn<string>;
     precision?: number;
+    index?: number;
 }): {
     value: Readonly<{
         value: string;

package/lib/typescript/src/charts/line/utils/getPath.d.ts

@@ -1,5 +1,5 @@
 import type { TLineChartData, YDomain } from '../types';
-export declare function getPath({ data, from, to, width, height, gutter, shape: _shape, yDomain, }: {
+export declare function getPath({ data, from, to, width, height, gutter, shape: _shape, yDomain, xDomain, }: {
     data: TLineChartData;
     from?: number;
     to?: number;
@@ -8,4 +8,5 @@ export declare function getPath({ data, from, to, width, height, gutter, shape:
     gutter: number;
     shape?: unknown;
     yDomain: YDomain;
+    xDomain?: [number, number];
 }): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-wagmi-charts",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "description": "A sweet candlestick chart for React Native",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -40,18 +40,20 @@
     "d3-scale": "^2",
     "d3-shape": "^3.0.1",
     "react-keyed-flatten-children": "^1.3.0",
-    "react-native-redash": "^16.1.1",
-    "react-native-svg": "^12.1.1"
+    "react-native-redash": "^16.1.1"
   },
   "devDependencies": {
     "@commitlint/config-conventional": "^12.0.4",
     "@react-native-community/eslint-config": "^3.0.0",
+    "@types/d3-array": "^3.0.4",
+    "@types/d3-scale": "^4.0.3",
     "@types/jest": "^26.0.24",
     "@types/react": "^17.0.14",
     "@types/react-native": "^0.64.12",
     "eslint": "^7.31.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^7.0.1",
     "jest": "^27.0.6",
     "pod-install": "^0.1.24",
@@ -61,13 +63,15 @@
     "react-native-builder-bob": "^0.18.1",
     "react-native-gesture-handler": "^2.1.0",
     "react-native-reanimated": "~2.3.1",
+    "react-native-svg": "^12.1.1",
     "typescript": "^4.3.5"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
     "react-native-gesture-handler": "*",
-    "react-native-reanimated": "*"
+    "react-native-reanimated": "*",
+    "react-native-svg": "*"
   },
   "jest": {
     "preset": "react-native",
@@ -94,7 +98,13 @@
         }
       ],
       "@typescript-eslint/no-explicit-any": "error",
-      "no-shadow": "off"
+      "no-shadow": "off",
+      "react-hooks/exhaustive-deps": [
+        "error",
+        {
+          "additionalHooks": "(useAnimatedStyle|useDerivedValue|useAnimatedProps)"
+        }
+      ]
     }
   },
   "eslintIgnore": [

package/src/charts/candle/Crosshair.tsx

@@ -64,14 +64,20 @@ export function CandlestickChartCrosshair({
       currentX.value = -1;
     },
   });
-  const horizontal = useAnimatedStyle(() => ({
-    opacity: opacity.value,
-    transform: [{ translateY: currentY.value }],
-  }));
-  const vertical = useAnimatedStyle(() => ({
-    opacity: opacity.value,
-    transform: [{ translateX: currentX.value }],
-  }));
+  const horizontal = useAnimatedStyle(
+    () => ({
+      opacity: opacity.value,
+      transform: [{ translateY: currentY.value }],
+    }),
+    [opacity, currentY]
+  );
+  const vertical = useAnimatedStyle(
+    () => ({
+      opacity: opacity.value,
+      transform: [{ translateX: currentX.value }],
+    }),
+    [opacity, currentX]
+  );
 
   useAnimatedReaction(
     () => currentX.value,
@@ -79,7 +85,8 @@ export function CandlestickChartCrosshair({
       if (data !== -1 && data !== prevData && onCurrentXChange) {
         runOnJS(onCurrentXChange)(data);
       }
-    }
+    },
+    [currentX]
   );
 
   return (

package/src/charts/candle/CrosshairTooltip.tsx

@@ -65,24 +65,33 @@ export function CandlestickChartCrosshairTooltip({
     }
 
     return offset;
-  });
+  }, [currentY, elementHeight, height, yGutter]);
 
-  const tooltip = useAnimatedStyle(() => ({
-    backgroundColor: 'white',
-    position: 'absolute',
-    display: 'flex',
-    padding: 4,
-  }));
-  const leftTooltip = useAnimatedStyle(() => ({
-    left: xGutter,
-    top: -(elementHeight.value / 2) - topOffset.value,
-    opacity: position.value === 'left' ? 1 : 0,
-  }));
-  const rightTooltip = useAnimatedStyle(() => ({
-    left: width - elementWidth.value - xGutter,
-    top: -(elementHeight.value / 2) - topOffset.value,
-    opacity: position.value === 'right' ? 1 : 0,
-  }));
+  const tooltip = useAnimatedStyle(
+    () => ({
+      backgroundColor: 'white',
+      position: 'absolute',
+      display: 'flex',
+      padding: 4,
+    }),
+    []
+  );
+  const leftTooltip = useAnimatedStyle(
+    () => ({
+      left: xGutter,
+      top: -(elementHeight.value / 2) - topOffset.value,
+      opacity: position.value === 'left' ? 1 : 0,
+    }),
+    [elementHeight, position, topOffset, xGutter]
+  );
+  const rightTooltip = useAnimatedStyle(
+    () => ({
+      left: width - elementWidth.value - xGutter,
+      top: -(elementHeight.value / 2) - topOffset.value,
+      opacity: position.value === 'right' ? 1 : 0,
+    }),
+    [elementHeight, elementWidth, position, topOffset, width, xGutter]
+  );
 
   return (
     <>

package/src/charts/candle/useCandleData.ts

@@ -11,7 +11,7 @@ export function useCandleData(): Readonly<Animated.SharedValue<TCandle>> {
       return { timestamp: -1, low: -1, open: -1, high: -1, close: -1 };
     }
     return data[Math.floor(currentX.value / step)];
-  });
+  }, [currentX, data, step]);
 
   return candle;
 }

package/src/charts/candle/useDatetime.ts

@@ -25,7 +25,7 @@ export function useCandlestickChartDatetime({
   const timestampString = useDerivedValue(() => {
     if (timestamp.value === -1) return '';
     return timestamp.value.toString();
-  });
+  }, [timestamp]);
 
   const formatted = useDerivedValue(() => {
     if (timestamp.value === -1) return '';
@@ -37,7 +37,7 @@ export function useCandlestickChartDatetime({
     return format
       ? format({ value: timestamp.value, formatted: formattedDatetime })
       : formattedDatetime;
-  });
+  }, [timestamp, locale, options, format]);
 
   return { value: timestampString, formatted };
 }

package/src/charts/candle/usePrice.ts

@@ -34,14 +34,14 @@ export function useCandlestickChartPrice({
     }
     if (price === -1) return '';
     return price.toFixed(precision).toString();
-  });
+  }, [currentY, domain, height, candle, type, precision]);
   const formatted = useDerivedValue(() => {
     if (!float.value) return '';
     const formattedPrice = formatPrice({ value: float.value });
     return format
       ? format({ value: float.value, formatted: formattedPrice })
       : formattedPrice;
-  });
+  }, [float, format]);
 
   return { value: float, formatted };
 }

package/src/charts/line/Chart.tsx

@@ -6,10 +6,13 @@ import { LineChartContext } from './Context';
 import { LineChartIdProvider, useLineChartData } from './Data';
 
 import { getArea, getPath } from './utils';
+import { parse, Path } from 'react-native-redash';
 
 export const LineChartDimensionsContext = React.createContext({
   width: 0,
   height: 0,
+  pointWidth: 0,
+  parsedPath: {} as Path,
   path: '',
   area: '',
   shape: d3Shape.curveBumpX,
@@ -44,7 +47,7 @@ export function LineChart({
   absolute,
   ...props
 }: LineChartProps) {
-  const { yDomain, xLength } = React.useContext(LineChartContext);
+  const { yDomain, xLength, xDomain } = React.useContext(LineChartContext);
   const { data } = useLineChartData({
     id,
   });
@@ -66,10 +69,11 @@ export function LineChart({
         gutter: yGutter,
         shape,
         yDomain,
+        xDomain,
       });
     }
     return '';
-  }, [data, pathWidth, height, yGutter, shape, yDomain]);
+  }, [data, pathWidth, height, yGutter, shape, yDomain, xDomain]);
 
   const area = React.useMemo(() => {
     if (data && data.length > 0) {
@@ -85,9 +89,18 @@ export function LineChart({
     return '';
   }, [data, pathWidth, height, yGutter, shape, yDomain]);
 
+  const dataLength = data.length;
+  const parsedPath = React.useMemo(() => parse(path), [path]);
+  const pointWidth = React.useMemo(
+    () => width / (dataLength - 1),
+    [dataLength, width]
+  );
+
   const contextValue = React.useMemo(
     () => ({
       gutter: yGutter,
+      parsedPath,
+      pointWidth,
       area,
       path,
       width,
@@ -95,7 +108,17 @@ export function LineChart({
       pathWidth,
       shape,
     }),
-    [yGutter, area, path, width, height, pathWidth, shape]
+    [
+      yGutter,
+      parsedPath,
+      pointWidth,
+      area,
+      path,
+      width,
+      height,
+      pathWidth,
+      shape,
+    ]
   );
 
   return (