text: import React, { Component } from 'react';
  import { TabView } from '../../components/tabview/TabView';
  import { Chart } from '../../components/chart/Chart';
  import { useLiveEditorTabs }from '../liveeditor/LiveEditor';
  import { AppInlineHeader } from '../../AppInlineHeader';
  import AppContentContext from '../../AppContentContext';
  import AppDemoActions from '../../AppDemoActions';
  
  export class LineChartDemo extends Component {
  
      constructor(props) {
          super(props);
  
          this.basicData = {
              labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
              datasets: [
                  {
                      label: 'First Dataset',
                      data: [65, 59, 80, 81, 56, 55, 40],
                      fill: false,
                      borderColor: '#42A5F5'
                  },
                  {
                      label: 'Second Dataset',
                      data: [28, 48, 40, 19, 86, 27, 90],
                      fill: false,
                      borderColor: '#FFA726'
                  }
              ]
          };
  
          this.multiAxisData = {
              labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
              datasets: [{
                  label: 'Dataset 1',
                  fill: false,
                  borderColor: '#42A5F5',
                  yAxisID: 'y-axis-1',
                  data: [65, 59, 80, 81, 56, 55, 10]
              }, {
                  label: 'Dataset 2',
                  fill: false,
                  borderColor: '#00bb7e',
                  yAxisID: 'y-axis-2',
                  data: [28, 48, 40, 19, 86, 27, 90]
              }]
          };
  
          this.lineStylesData = {
              labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
              datasets: [
                  {
                      label: 'First Dataset',
                      data: [65, 59, 80, 81, 56, 55, 40],
                      fill: false,
                      borderColor: '#42A5F5'
                  },
                  {
                      label: 'Second Dataset',
                      data: [28, 48, 40, 19, 86, 27, 90],
                      fill: false,
                      borderDash: [5, 5],
                      borderColor: '#66BB6A'
                  },
                  {
                      label: 'Third Dataset',
                      data: [12, 51, 62, 33, 21, 62, 45],
                      fill: true,
                      borderColor: '#FFA726',
                      backgroundColor: 'rgba(255,167,38,0.2)'
                  }
              ]
          };
  
          this.options = {
              'light': this.getLightTheme(),
              'dark': this.getDarkTheme()
          };
      }
  
  
      getLightTheme() {
          let basicOptions = {
              legend: {
                  labels: {
                      fontColor: '#495057'
                  }
              },
              scales: {
                  xAxes: [{
                      ticks: {
                          fontColor: '#495057'
                      }
                  }],
                  yAxes: [{
                      ticks: {
                          fontColor: '#495057'
                      }
                  }]
              }
          };
  
          let multiAxisOptions = {
              responsive: true,
              hoverMode: 'index',
              stacked: false,
              scales: {
                  xAxes: [{
                      ticks: {
                          fontColor: '#495057'
                      },
                      gridLines: {
                          color: '#ebedef'
                      }
                  }],
                  yAxes: [{
                      type: 'linear',
                      display: true,
                      position: 'left',
                      id: 'y-axis-1',
                      ticks: {
                          fontColor: '#495057'
                      },
                      gridLines: {
                          color: '#ebedef'
                      }
                  }, {
                      type: 'linear',
                      display: true,
                      position: 'right',
                      id: 'y-axis-2',
                      ticks: {
                          fontColor: '#495057'
                      },
                      gridLines: {
                          drawOnChartArea: false,
                          color: '#ebedef'
                      }
                  }]
              },
              legend: {
                  labels: {
                      fontColor: '#495057'
                  }
              }
          };
  
          return {
              basicOptions,
              multiAxisOptions
          }
      }
  
      getDarkTheme() {
          let basicOptions = {
              legend: {
                  labels: {
                      fontColor: '#ebedef'
                  }
              },
              scales: {
                  xAxes: [{
                      ticks: {
                          fontColor: '#ebedef'
                      },
                      gridLines: {
                          color: 'rgba(255,255,255,0.2)'
                      }
                  }],
                  yAxes: [{
                      ticks: {
                          fontColor: '#ebedef'
                      },
                      gridLines: {
                          color: 'rgba(255,255,255,0.2)'
                      }
                  }]
              }
          };
  
          let multiAxisOptions = {
              responsive: true,
              hoverMode: 'index',
              stacked: false,
              scales: {
                  xAxes: [{
                      ticks: {
                          fontColor: '#ebedef'
                      },
                      gridLines: {
                          color: 'rgba(255,255,255,0.2)'
                      }
                  }],
                  yAxes: [{
                      type: 'linear',
                      display: true,
                      position: 'left',
                      id: 'y-axis-1',
                      ticks: {
                          fontColor: '#ebedef'
                      },
                      gridLines: {
                          color: 'rgba(255,255,255,0.2)'
                      }
                  }, {
                      type: 'linear',
                      display: true,
                      position: 'right',
                      id: 'y-axis-2',
                      ticks: {
                          fontColor: '#ebedef'
                      },
                      gridLines: {
                          drawOnChartArea: false,
                          color: 'rgba(255,255,255,0.2)'
                      }
                  }]
              },
              legend: {
                  labels: {
                      fontColor: '#ebedef'
                  }
              }
          };
  
          return {
              basicOptions,
              multiAxisOptions
          }
      }
  
      render() {
          return (
              <div>
                  <div className="content-section introduction">
                      <AppInlineHeader changelogText="chart">
                          <h1>LineChart</h1>
                          <p>A line chart or line graph is a type of chart which displays information as a series of data points called 'markers' connected by straight line segments.</p>
                      </AppInlineHeader> 
                      <AppDemoActions github="chart/LineChartDemo.js" />
                  </div>
  
                  <div className="content-section implementation">
                      <AppContentContext.Consumer>
                          {
                              context => {
                                  const { basicOptions, multiAxisOptions } = this.options[`${context.darkTheme ? 'dark' : 'light'}`];
  
                                  return (
                                      <>
                                          <div className="card">
                                              <h5>Basic</h5>
                                              <Chart type="line" data={this.basicData} options={basicOptions} />
                                          </div>
  
                                          <div className="card">
                                              <h5>Multi Axis</h5>
                                              <Chart type="line" data={this.multiAxisData} options={multiAxisOptions} />
                                          </div>
  
                                          <div className="card">
                                              <h5>Line Styles</h5>
                                              <Chart type="line" data={this.lineStylesData} options={basicOptions} />
                                          </div>
                                      </>
                                  )
                              }
                          }
                      </AppContentContext.Consumer>
                  </div>
  
                  <LineChartDemoDoc />
              </div>
          )
      }
  }
  
  export class LineChartDemoDoc extends Component {
  
      constructor(props) {
          super(props);
  
          this.sources = {
              'class': {
                  tabName: 'Class Source',
                  content: `
  import React, { Component } from 'react';
  import { Chart } from 'primereact/chart';
  
  export class LineChartDemo extends Component {
  
      constructor(props) {
          super(props);
  
          this.basicData = {
              labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
              datasets: [
                  {
                      label: 'First Dataset',
                      data: [65, 59, 80, 81, 56, 55, 40],
                      fill: false,
                      borderColor: '#42A5F5'
                  },
                  {
                      label: 'Second Dataset',
                      data: [28, 48, 40, 19, 86, 27, 90],
                      fill: false,
                      borderColor: '#FFA726'
                  }
              ]
          };
  
          this.multiAxisData = {
              labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
              datasets: [{
                  label: 'Dataset 1',
                  fill: false,
                  borderColor: '#42A5F5',
                  yAxisID: 'y-axis-1',
                  data: [65, 59, 80, 81, 56, 55, 10]
              }, {
                  label: 'Dataset 2',
                  fill: false,
                  borderColor: '#00bb7e',
                  yAxisID: 'y-axis-2',
                  data: [28, 48, 40, 19, 86, 27, 90]
              }]
          };
  
          this.lineStylesData = {
              labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
              datasets: [
                  {
                      label: 'First Dataset',
                      data: [65, 59, 80, 81, 56, 55, 40],
                      fill: false,
                      borderColor: '#42A5F5'
                  },
                  {
                      label: 'Second Dataset',
                      data: [28, 48, 40, 19, 86, 27, 90],
                      fill: false,
                      borderDash: [5, 5],
                      borderColor: '#66BB6A'
                  },
                  {
                      label: 'Third Dataset',
                      data: [12, 51, 62, 33, 21, 62, 45],
                      fill: true,
                      borderColor: '#FFA726',
                      backgroundColor: 'rgba(255,167,38,0.2)'
                  }
              ]
          };
  
          this.options = this.getLightTheme();
      }
  
      getLightTheme() {
          let basicOptions = {
              legend: {
                  labels: {
                      fontColor: '#495057'
                  }
              },
              scales: {
                  xAxes: [{
                      ticks: {
                          fontColor: '#495057'
                      }
                  }],
                  yAxes: [{
                      ticks: {
                          fontColor: '#495057'
                      }
                  }]
              }
          };
  
          let multiAxisOptions = {
              responsive: true,
              hoverMode: 'index',
              stacked: false,
              scales: {
                  xAxes: [{
                      ticks: {
                          fontColor: '#495057'
                      },
                      gridLines: {
                          color: '#ebedef'
                      }
                  }],
                  yAxes: [{
                      type: 'linear',
                      display: true,
                      position: 'left',
                      id: 'y-axis-1',
                      ticks: {
                          fontColor: '#495057'
                      },
                      gridLines: {
                          color: '#ebedef'
                      }
                  }, {
                      type: 'linear',
                      display: true,
                      position: 'right',
                      id: 'y-axis-2',
                      ticks: {
                          fontColor: '#495057'
                      },
                      gridLines: {
                          drawOnChartArea: false,
                          color: '#ebedef'
                      }
                  }]
              },
              legend: {
                  labels: {
                      fontColor: '#495057'
                  }
              }
          };
  
          return {
              basicOptions,
              multiAxisOptions
          }
      }
  
      render() {
          const { basicOptions, multiAxisOptions } = this.options;
  
          return (
              <div>
                  <div className="card">
                      <h5>Basic</h5>
                      <Chart type="line" data={this.basicData} options={basicOptions} />
                  </div>
  
                  <div className="card">
                      <h5>Multi Axis</h5>
                      <Chart type="line" data={this.multiAxisData} options={multiAxisOptions} />
                  </div>
  
                  <div className="card">
                      <h5>Line Styles</h5>
                      <Chart type="line" data={this.lineStylesData} options={basicOptions} />
                  </div>
              </div>
          )
      }
  }
                  `
              },
              'hooks': {
                  tabName: 'Hooks Source',
                  content: `
  import React from 'react';
  import { Chart } from 'primereact/chart';
  
  const LineChartDemo = () => {
      const basicData = {
          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
          datasets: [
              {
                  label: 'First Dataset',
                  data: [65, 59, 80, 81, 56, 55, 40],
                  fill: false,
                  borderColor: '#42A5F5'
              },
              {
                  label: 'Second Dataset',
                  data: [28, 48, 40, 19, 86, 27, 90],
                  fill: false,
                  borderColor: '#FFA726'
              }
          ]
      };
  
      const multiAxisData = {
          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
          datasets: [{
              label: 'Dataset 1',
              fill: false,
              borderColor: '#42A5F5',
              yAxisID: 'y-axis-1',
              data: [65, 59, 80, 81, 56, 55, 10]
          }, {
              label: 'Dataset 2',
              fill: false,
              borderColor: '#00bb7e',
              yAxisID: 'y-axis-2',
              data: [28, 48, 40, 19, 86, 27, 90]
          }]
      };
  
      const lineStylesData = {
          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
          datasets: [
              {
                  label: 'First Dataset',
                  data: [65, 59, 80, 81, 56, 55, 40],
                  fill: false,
                  borderColor: '#42A5F5'
              },
              {
                  label: 'Second Dataset',
                  data: [28, 48, 40, 19, 86, 27, 90],
                  fill: false,
                  borderDash: [5, 5],
                  borderColor: '#66BB6A'
              },
              {
                  label: 'Third Dataset',
                  data: [12, 51, 62, 33, 21, 62, 45],
                  fill: true,
                  borderColor: '#FFA726',
                  backgroundColor: 'rgba(255,167,38,0.2)'
              }
          ]
      };
  
      const getLightTheme = () => {
          let basicOptions = {
              legend: {
                  labels: {
                      fontColor: '#495057'
                  }
              },
              scales: {
                  xAxes: [{
                      ticks: {
                          fontColor: '#495057'
                      }
                  }],
                  yAxes: [{
                      ticks: {
                          fontColor: '#495057'
                      }
                  }]
              }
          };
  
          let multiAxisOptions = {
              responsive: true,
              hoverMode: 'index',
              stacked: false,
              scales: {
                  xAxes: [{
                      ticks: {
                          fontColor: '#495057'
                      },
                      gridLines: {
                          color: '#ebedef'
                      }
                  }],
                  yAxes: [{
                      type: 'linear',
                      display: true,
                      position: 'left',
                      id: 'y-axis-1',
                      ticks: {
                          fontColor: '#495057'
                      },
                      gridLines: {
                          color: '#ebedef'
                      }
                  }, {
                      type: 'linear',
                      display: true,
                      position: 'right',
                      id: 'y-axis-2',
                      ticks: {
                          fontColor: '#495057'
                      },
                      gridLines: {
                          drawOnChartArea: false,
                          color: '#ebedef'
                      }
                  }]
              },
              legend: {
                  labels: {
                      fontColor: '#495057'
                  }
              }
          };
  
          return {
              basicOptions,
              multiAxisOptions
          }
      }
  
      const { basicOptions, multiAxisOptions } = getLightTheme();
  
      return (
          <div>
              <div className="card">
                  <h5>Basic</h5>
                  <Chart type="line" data={basicData} options={basicOptions} />
              </div>
  
              <div className="card">
                  <h5>Multi Axis</h5>
                  <Chart type="line" data={multiAxisData} options={multiAxisOptions} />
              </div>
  
              <div className="card">
                  <h5>Line Styles</h5>
                  <Chart type="line" data={lineStylesData} options={basicOptions} />
              </div>
          </div>
      )
  }
                  `
              },
              'ts': {
                  tabName: 'TS Source',
                  content: `
  import React from 'react';
  import { Chart } from 'primereact/chart';
  
  const LineChartDemo = () => {
      const basicData = {
          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
          datasets: [
              {
                  label: 'First Dataset',
                  data: [65, 59, 80, 81, 56, 55, 40],
                  fill: false,
                  borderColor: '#42A5F5'
              },
              {
                  label: 'Second Dataset',
                  data: [28, 48, 40, 19, 86, 27, 90],
                  fill: false,
                  borderColor: '#FFA726'
              }
          ]
      };
  
      const multiAxisData = {
          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
          datasets: [{
              label: 'Dataset 1',
              fill: false,
              borderColor: '#42A5F5',
              yAxisID: 'y-axis-1',
              data: [65, 59, 80, 81, 56, 55, 10]
          }, {
              label: 'Dataset 2',
              fill: false,
              borderColor: '#00bb7e',
              yAxisID: 'y-axis-2',
              data: [28, 48, 40, 19, 86, 27, 90]
          }]
      };
  
      const lineStylesData = {
          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
          datasets: [
              {
                  label: 'First Dataset',
                  data: [65, 59, 80, 81, 56, 55, 40],
                  fill: false,
                  borderColor: '#42A5F5'
              },
              {
                  label: 'Second Dataset',
                  data: [28, 48, 40, 19, 86, 27, 90],
                  fill: false,
                  borderDash: [5, 5],
                  borderColor: '#66BB6A'
              },
              {
                  label: 'Third Dataset',
                  data: [12, 51, 62, 33, 21, 62, 45],
                  fill: true,
                  borderColor: '#FFA726',
                  backgroundColor: 'rgba(255,167,38,0.2)'
              }
          ]
      };
  
      const getLightTheme = () => {
          let basicOptions = {
              legend: {
                  labels: {
                      fontColor: '#495057'
                  }
              },
              scales: {
                  xAxes: [{
                      ticks: {
                          fontColor: '#495057'
                      }
                  }],
                  yAxes: [{
                      ticks: {
                          fontColor: '#495057'
                      }
                  }]
              }
          };
  
          let multiAxisOptions = {
              responsive: true,
              hoverMode: 'index',
              stacked: false,
              scales: {
                  xAxes: [{
                      ticks: {
                          fontColor: '#495057'
                      },
                      gridLines: {
                          color: '#ebedef'
                      }
                  }],
                  yAxes: [{
                      type: 'linear',
                      display: true,
                      position: 'left',
                      id: 'y-axis-1',
                      ticks: {
                          fontColor: '#495057'
                      },
                      gridLines: {
                          color: '#ebedef'
                      }
                  }, {
                      type: 'linear',
                      display: true,
                      position: 'right',
                      id: 'y-axis-2',
                      ticks: {
                          fontColor: '#495057'
                      },
                      gridLines: {
                          drawOnChartArea: false,
                          color: '#ebedef'
                      }
                  }]
              },
              legend: {
                  labels: {
                      fontColor: '#495057'
                  }
              }
          };
  
          return {
              basicOptions,
              multiAxisOptions
          }
      }
  
      const { basicOptions, multiAxisOptions } = getLightTheme();
  
      return (
          <div>
              <div className="card">
                  <h5>Basic</h5>
                  <Chart type="line" data={basicData} options={basicOptions} />
              </div>
  
              <div className="card">
                  <h5>Multi Axis</h5>
                  <Chart type="line" data={multiAxisData} options={multiAxisOptions} />
              </div>
  
              <div className="card">
                  <h5>Line Styles</h5>
                  <Chart type="line" data={lineStylesData} options={basicOptions} />
              </div>
          </div>
      )
  }
                  `
              }
          }
      }
  
      shouldComponentUpdate() {
          return false;
      }
  
      render() {
          return (
              <div className="content-section documentation" id="app-doc">
                  <TabView>
                      {
                          useLiveEditorTabs({ name: 'LineChartDemo', sources: this.sources, dependencies: { 'chart.js': '2.7.3' } })
                      }
                  </TabView>
              </div>
          )
      }
  }
  