text: import React, {Component} from 'react';
  import {TabView, TabPanel} from '../../components/tabview/TabView';
  import {CodeHighlight} from '../codehighlight/CodeHighlight';
  import AppContentContext from '../../AppContentContext';
  import {Chart} from '../../components/chart/Chart';
  import { LiveEditor } from '../liveeditor/LiveEditor';
  
  export class PieChartDemo extends Component {
  
      render() {
          const data = {
              labels: ['A','B','C'],
              datasets: [
                  {
                      data: [300, 50, 100],
                      backgroundColor: [
                          "#FF6384",
                          "#36A2EB",
                          "#FFCE56"
                      ],
                      hoverBackgroundColor: [
                          "#FF6384",
                          "#36A2EB",
                          "#FFCE56"
                      ]
                  }]
              };
  
          return (
              <div>
                  <div className="content-section introduction">
                      <div className="feature-intro">
                          <h1>PieChart</h1>
                          <p>A pie chart is a circular statistical graphic, which is divided into slices to illustrate numerical proportion.</p>
  
                          <AppContentContext.Consumer>
                              { context => <button onClick={() => context.onChangelogBtnClick("chart")} className="layout-changelog-button">{context.changelogText}</button> }
                          </AppContentContext.Consumer>
                      </div>
                  </div>
  
                  <div className="content-section implementation">
                      <Chart type="pie" data={data} />
                  </div>
  
                  <PieChartDemoDoc></PieChartDemoDoc>
              </div>
          )
      }
  }
  
  export class PieChartDemoDoc extends Component {
  
      constructor(props) {
          super(props);
          this.state = {
              activeIndex: 0
          };
  
          this.sources = {
              'app': {
                  tabName: 'Source',
                  content: `
  import React, { Component } from 'react';
  import {Chart} from 'primereact/chart';
  
  export class PieChartDemo extends Component {
  
      render() {
          const data = {
              labels: ['A','B','C'],
              datasets: [
                  {
                      data: [300, 50, 100],
                      backgroundColor: [
                          "#FF6384",
                          "#36A2EB",
                          "#FFCE56"
                      ],
                      hoverBackgroundColor: [
                          "#FF6384",
                          "#36A2EB",
                          "#FFCE56"
                      ]
                  }]
              };
  
          return (
              <div>
                  <Chart type="pie" data={data} />
              </div>
          )
      }
  }
                  `
              },
              'hooks': {
                  tabName: 'Hooks Source',
                  content: `
  import React from 'react';
  import {Chart} from 'primereact/chart';
  
  const PieChartDemo = () => {
      const data = {
          labels: ['A','B','C'],
          datasets: [
              {
                  data: [300, 50, 100],
                  backgroundColor: [
                      "#FF6384",
                      "#36A2EB",
                      "#FFCE56"
                  ],
                  hoverBackgroundColor: [
                      "#FF6384",
                      "#36A2EB",
                      "#FFCE56"
                  ]
              }]
          };
  
      return (
          <div>
              <Chart type="pie" data={data} />
          </div>
      )
  }
                  `
              },
              'ts': {
                  tabName: 'TS Source',
                  content: `
  import React from 'react';
  import {Chart} from 'primereact/chart';
  
  const PieChartDemo = () => {
      const data = {
          labels: ['A','B','C'],
          datasets: [
              {
                  data: [300, 50, 100],
                  backgroundColor: [
                      "#FF6384",
                      "#36A2EB",
                      "#FFCE56"
                  ],
                  hoverBackgroundColor: [
                      "#FF6384",
                      "#36A2EB",
                      "#FFCE56"
                  ]
              }]
          };
  
      return (
          <div>
              <Chart type="pie" data={data} />
          </div>
      )
  }
                  `
              }
          }
      }
  
      shouldComponentUpdate(nextProps, nextState) {
          if (this.state.activeIndex !== nextState.activeIndex) {
              return true;
          }
  
          return false;
      }
  
      renderSourceButtons() {
          return (
              <div className="source-button-group">
                  <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/chart" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-github"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
                      <span>View on GitHub</span>
                  </a>
                  <LiveEditor name="PieChartDemo" sources={this.sources} dependencies={{'chart.js': '2.7.3'}} activeButtonIndex={this.state.activeIndex} />
              </div>
          )
      }
  
      render() {
          const sourceButtons = this.renderSourceButtons();
  
          return (
              <div className="content-section documentation">
                  <TabView activeIndex={this.state.activeIndex} onTabChange={(e) => this.setState({ activeIndex: e.index })}>
                      {
                          this.sources && Object.entries(this.sources).map(([key, value], index) => {
                              return (
                                  <TabPanel key={`source_${index}`} header={value.tabName}>
                                      {sourceButtons}
  
                                      <CodeHighlight className="language-javascript">
                                          {value.content}
                                      </CodeHighlight>
                                  </TabPanel>
                              );
                          })
                      }
                  </TabView>
              </div>
          )
      }
  }
  