import React from 'react';
import Chart from 'kaktana-react-lightweight-charts';

type LWChartsProps = {

}

const LWCharts: React.FC<LWChartsProps> = () => {
    const options = {
        color: '#f48fb1',
        lineStyle: 0,
        lineWidth: 1,
        crosshairMarkerVisible: true,
        crosshairMarkerRadius: 6,
        crosshairMarkerBorderColor: '#ffffff',
        crosshairMarkerBackgroundColor: '#2296f3',
        lineType: 1,
    }
    const lineSeries = [{
        data: [
            { x: 0, y: 8 },
            { x: 1, y: 5 },
            { x: 2, y: 4 },
            { x: 3, y: 9 },
            { x: 4, y: 1 },
            { x: 5, y: 7 },
            { x: 6, y: 6 },
            { x: 7, y: 3 },
            { x: 8, y: 2 },
            { x: 9, y: 0 }
        ]
    }]
    return (
        <div>
            <Chart options={options} lineSeries={lineSeries} autoWidth height={320} />
        </div>
    );
};

export default LWCharts;

import Chart from 'kaktana-react-lightweight-charts';

const stockChart = () => {
  return (
    <Chart options={{
      timeScale: {
        borderColor: '#fff',
        tickMarkFormatter: time => 'TEST'
      }
    }} />
  )
};

export default stockChart;

            lineSeries={this.getChartData1("line", mainData)}
            options={optionMaster}
            autoWidth
            height={indexMode ? 320 : 240}
            onCrosshairMove={(e) => this.createLineChart(e, mainData)}
            onClick={(e) => this.openWindow(e, mainData)} 
            ( ....unsubscriberVisibleTimeRangeChange..how to call from here?...)

          />`

topColor:'#4682b4',
bottomColor: '#4682b4',
lineColor: 'rgba(21, 146, 230, 1)',
lineStyle: 0,
lineWidth: 3,
crosshairMarkerVisible: false,
crosshairMarkerRadius: 3,
layout: {
	backgroundColor: "#FFF",

  },

  grid: {
	vertLines: {
	  visible: false,
 
	},
	horzLines: {
	  visible: false,
 
	}
  },
  priceScale: {
	borderVisible: false,
	position: 'left',
	color:'red',
  
  },
  timeScale: {
	borderVisible: false,
	borderColor: "red",
	

  },
  crosshair: {
	mode: CrosshairMode.Normal
  },
}

  const options = {
    layout: {
      backgroundColor: '#fff',
      textColor: 'rgba(145, 150, 179, 1)',
      fontSize: 12,
    },
    grid: {
      vertLines: {
        color: 'rgba(223, 225, 233, 1)',
        style: 2,
        visible: true,
      },
      horzLines: {
        color: 'rgba(223, 225, 233, 1)',
        style: 2,
        visible: true,
      },
    },
    crosshair: {
        vertLine: {
            color: 'rgba(78, 84, 113, 1)',
            width: 0.5,
            style: 2,
            visible: true,
            labelVisible: false,
        },
        horzLine: {
            color: 'rgba(78, 84, 113, 1)',
            width: 0.5,
            style: 2,
            visible: true,
            labelVisible: true,
        },
        mode: 1,
    },
    handleScroll: false,
    handleScale: false,
    axisPressedMouseMove: false,
    priceScale: {
        borderVisible: false,
    },
    timeScale: {
      rightOffset: 0,
      fixLeftEdge: true,
      lockVisibleTimeRangeOnResize: true,
      shiftVisibleRangeOnNewBar: false,
      timeVisible: true,
      secondsVisible: true,
      borderVisible: false,
    },    
  };

  const lineSeries = [
    {
      options: {
        color: 'rgba(76, 194, 194, 1)',
        lineWidth: 3,
        crosshairMarkerVisible: true,
        crosshairMarkerRadius: 8,
        autoscaleInfoProvider: () => ({
          priceRange: {
            minValue: 0,
            maxValue: 500,
          },
        }),
      },
      data: chart ? chart.map((el) => {        
        return { time: el.time, value: el.price };
      }) : [],
    },
  ];

  return (
      <Chart
        options={options}
        lineSeries={lineSeries}
        autoWidth
        height={190}
      />
  );

const lineSeries = [
  {
    data: mainSeriesData,
    options: {
      priceScaleId: "left", 
      title: "Portfolio Value"
    }
  },
  {
    data: percentSeriesData,
    options: {
      priceScaleId: "right",
      title: "Profit/loss %"
    }
  }
];

code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.13.1" from [email protected]
npm ERR! node_modules/kaktana-react-lightweight-charts
npm ERR!   kaktana-react-lightweight-charts@"2.0.0" from the root project

npm install --save kaktana-react-lightweight-charts
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project   
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.13.1" from [email protected]     
npm ERR! node_modules/kaktana-react-lightweight-charts
npm ERR!   kaktana-react-lightweight-charts@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

npm ERR! A complete log of this run can be found in:
npm ERR!     dir: 2022-07-18T16_06_40_243Z-debug.log

        const tvPriceOptions = {
            alignLabels: true,
            timeScale: {
                rightOffset: 0,
                barSpacing: 15,
                fixLeftEdge: false,
                lockVisibleTimeRangeOnResize: true,
                rightBarStaysOnScroll: true,
                borderVisible: false,
                borderColor: '#fff000',
                visible: true,
                timeVisible: true,
                secondsVisible: false
            },
            rightPriceScale: {
                scaleMargins: {
                    top: 0.3,
                    bottom: 0.25,
                },
                borderVisible: false,
            },
            priceScale: {
                autoScale: true,
            },
            watermark: {
                color: 'rgba(0, 0, 0, 0.4)',
                visible: true,
                text: 'TxQuick: ' + pair + ': ' + candlestickInterval,
                fontSize: 18,
                horzAlign: 'left',
                vertAlign: 'bottom',
            },
        };

        const seriesCandleTv = [{
            options: {
                priceScaleId: 'right',
                upColor: '#00AA00',
                downColor: '#AA0000',
                borderVisible: false,
                wickVisible: true,
                borderColor: '#000000',
                wickColor: '#000000',
                borderUpColor: '#00AA00',
                borderDownColor: '#AA0000',
                wickUpColor: '#00AA00',
                wickDownColor: '#AA0000',
                priceFormat: {
                    type: 'custom',
                    minMove: '0.00000001',
                    formatter: (price) => {
                        return parseFloat(price).toFixed(decimals);
                    }
                },
            },
            data: candlesticksTv,
        }];

        //TODO figure out priceScaleId so both charts can be combined...
        const seriesVolumeTv = [{
            options: {
                color: '#269ffb',
                priceScaleId: '',
                scaleMargins: {
                    top: 0.8,
                    bottom: 0,
                },
                priceFormat: {
                    type: 'custom',
                    minMove: '0.00000001',
                    formatter: (value) => {
                        return parseFloat(value).toFixed(6);
                    }
                },
            },
            data: volumeBarsTv,
        }];