react-chartjs-2#HorizontalBar JavaScript Examples

OrganizationChart = (props) => {
    return (
        <div className="gsocChart" id="company">
            <HorizontalBar
                data={{
                    labels: ['2010','2011','2012','2013','2014','2015','2016', '2017', '2018', '2019', '2020', '2021'],
                    datasets: [
                        {
                            label: 'Open Source Organizations',
                            data: [42,102,135,175,150,150,175,180,177,190,134, 178, 198, 206, 201, 199, 199],
                            backgroundColor: 'rgba(54, 162, 235, 0.2)',
                            borderColor: 'rgba(54, 162, 235, 1)',
                            borderWidth: 1,
                        },
                    ],
                    }
                }
                options={{
                    maintainAspectRatio: false,
                    scales: {
                        yAxes: [
                            {
                                ticks: {
                                    beginAtZero: true,
                                },
                            },
                        ],
                    },
                    legend: {
                        labels: {
                            fontSize: props.font,
                        },
                    },
                }}
            />
        </div>
    )
}

export function HorizontalBarChart(props){
  function generateGraph() {
    const colorVal = `rgba(${props.color.r},${props.color.g},${props.color.b},${props.color.a})`;
    return {
      labels: props.labels,
      datasets: [
        {
          label: props.title,
          fill: false,
          lineTension: 0.5,
          backgroundColor: colorVal,
          borderColor: 'rgba(0,0,0,1)',
          borderWidth: 2,
          data: props.data
        }
      ]
    }
  }
    return (
      <div>
        <HorizontalBar data={generateGraph} />
      </div>
    );

}

export default function HorizontalBarChart(props){
  const { label, series, light } = props;
  const brushColor = light ? blackColor : whiteColor;
  var datasets = [];
  series.forEach( slice => {
    datasets.push({
      label: slice.label,
      data: [slice.value],
      backgroundColor: slice.color,
      borderColor: brushColor,
      borderWidth: 1,
      stack: 'default',
      barPercentage: 0.5,
      maxBarThickness: 20,
    });
  });

  const chartData = {
    labels: [label],
    datasets: datasets,
  };

  const chartOptions = {
    scales: {
      xAxes: [{
        stacked: true,
        display: false,
      }],
      yAxes: [{
        display: false,
      }],
    },
    legend: {
      display: false,
    },
  };

  return <HorizontalBar data={chartData} options={chartOptions}/>;
}

CovidTestsAgeChart = ({report}) => {
  return (
    <HorizontalBar data={formatData(report)} options={options} />
  )
}

function Event({ query }) {
  // Collect data from endpoint
  const { data, loading } = useSWR(
    // Use query ID in URL
    `/api/events/details?id=${query.id}${
      // If secret is present, use administrator view
      query.secret !== "" ? `&secret_key=${query.secret}` : ""
    }`,
    {
      fetcher,
      // Force refresh SWR every 500ms
      refreshInterval: 500,
    }
  );

  /**
   * Admin view: download all votes by voter id as a CSV
   * @returns {Object[]} Array of votes by voter id
   */
  const downloadCSVResults = () => {
    // Array of csv rows
    let csv = [];

    // For each voter
    for (let i = 0; i < data.event.voters.length; i++) {
      const voter = data.event.voters[i]; // Collect voter

      // Setup voter row
      let row = {};
      row["Voter ID"] = voter.id;

      // For each vote
      for (let j = 0; j < voter.vote_data.length; j++) {
        // Add column for vote tally
        row[`${voter.vote_data[j].title}`] = voter.vote_data[j].votes;
      }

      csv.push(row); // Push voter row to csv
    }

    return csv;
  };

  /**
   * Admin view: download voter URLs as text file
   */
  const downloadTXT = () => {
    // Collect voter URLs in single text string
    const text = data.event.voters
      .map((voter, _) => `https://quadraticvote.co/vote?user=${voter.id}`)
      .join("\n");

    // Create link component
    const element = document.createElement("a");
    // Create blob from text
    const file = new Blob([text], { type: "text/plain" });

    // Setup link component to be downloadable and hidden
    element.href = URL.createObjectURL(file);
    element.download = "voter_links.txt";
    element.style.display = "none";

    // Append link component to body
    document.body.appendChild(element);

    // Click link component to download file
    element.click();

    // Remove link component from body
    document.body.removeChild(element);
  };

  return (
    <Layout event>
      {/* Custom meta images */}
      <Head>
        <meta
          property="og:image"
          content={`https://qv-image.vercel.app/api/?id=${query.id}`}
        />
        <meta
          property="twitter:image"
          content={`https://qv-image.vercel.app/api/?id=${query.id}`}
        />
      </Head>

      {/* Navigation header */}
      <Navigation
        history={{
          // If secret is not present, return to home
          title:
            query.secret && query.secret !== "" ? "event creation" : "home",
          // If secret is present, return to create page
          link: query.secret && query.secret !== "" ? `/create` : "/",
        }}
        title="Event Details"
      />

      {/* Event page summary */}
      <div className="event">
        <h1>Event Details</h1>
        <div className="event__information">
          <h2>{!loading && data ? data.event.event_title : "Loading..."}</h2>
          <p>
            {!loading && data ? data.event.event_description : "Loading..."}
          </p>
        </div>

        {/* Event public URL */}
        <div className="event__section">
          <label>Event URL</label>
          <p>Statistics dashboard URL</p>
          <input
            value={`https://quadraticvote.co/event?id=${query.id}`}
            readOnly
          />
        </div>

        {query.id !== "" &&
        query.secret !== "" &&
        query.secret !== undefined &&
        !loading &&
        data ? (
          <>
            {/* Event private URL */}
            <div className="event__section">
              <label className="private__label">Private Admin URL</label>
              <p>Save this URL to manage event and make changes</p>
              <input
                value={`https://quadraticvote.co/event?id=${query.id}&secret=${query.secret}`}
                readOnly
              />
            </div>

            {/* Event download data as CSV */}
            <div className="event__section csv__download">
              <label className="private__label">CSV Results</label>
              <p>Download all quadratic votes, by voter ID, in a CSV</p>
              <CsvDownload
                data={downloadCSVResults()}
                filename="qv-export.csv"
              />
            </div>
          </>
        ) : null}

        {/* Event copyable links */}
        {query.id !== "" &&
        query.secret !== "" &&
        query.secret !== undefined &&
        !loading &&
        data ? (
          <div className="event__section">
            <label className="private__label">Individual voting links</label>
            <p>For private sharing with voters</p>
            <textarea
              className="event__section_textarea"
              // Collect voter urls as one text element
              value={data.event.voters
                .map(
                  (voter, _) => `https://quadraticvote.co/vote?user=${voter.id}`
                )
                .join("\n")}
              readOnly
            />
            <button onClick={downloadTXT} className="download__button">
              Download as TXT
            </button>
          </div>
        ) : null}

        {/* Event public URL */}
        <div className="event__section">
          <label>Event Votes</label>
          <p>Quadratic Voting-weighted voting results</p>
          {!loading && data ? (
            <div className="chart">
              <HorizontalBar data={data.chart} width={50} />
            </div>
          ) : (
            <div className="loading__chart">
              <HashLoader
                size={50}
                color="#0f0857"
                css={{ display: "inline-block" }}
              />
              <h3>Loading Chart...</h3>
              <span>Please give us a moment</span>
            </div>
          )}
        </div>

        {/* Event Publis statistics */}
        <div className="event__section">
          <label>Event Statistics</label>
          <div className="event__sub_section">
            <label>Voting Participants</label>
            <h3>
              {!loading && data
                ? `${data.statistics.numberVoters.toLocaleString()} / ${data.statistics.numberVotersTotal.toLocaleString()}`
                : "Loading..."}
            </h3>
          </div>
          <div className="event__sub_section">
            <label>Credits Used</label>
            <h3>
              {!loading && data
                ? `${data.statistics.numberVotes.toLocaleString()} / ${data.statistics.numberVotesTotal.toLocaleString()}`
                : "Loading..."}
            </h3>
          </div>
        </div>
      </div>

      {/* Global styles */}
      <style jsx global>{`
        .download__button,
        .csv__download > button {
          padding: 12px 0px;
          width: 100%;
          display: inline-block;
          border-radius: 5px;
          background-color: #0f0857;
          color: #fff;
          font-size: 18px;
          transition: 100ms ease-in-out;
          border: none;
          cursor: pointer;
          margin-top: 15px;
        }

        .download__button:hover,
        .csv__download > button:hover {
          opacity: 0.8;
        }
      `}</style>

      {/* Scoped styles */}
      <style jsx>{`
        .event {
          max-width: 700px;
          padding: 40px 20px 75px 20px;
          margin: 0px auto;
        }

        .event > h1 {
          font-size: 40px;
          color: #0f0857;
          margin: 0px;
        }

        .event__information {
          border: 1px solid #e7eaf3;
          padding: 10px;
          border-radius: 10px;
          margin: 20px 0px;
        }

        .event__information > h2 {
          color: #00d182;
          font-size: 22px;
          margin-block-end: 0px;
        }

        .event__information > p {
          font-size: 18px;
          line-height: 150%;
          color: rgb(107, 114, 128);
          margin-block-start: 0px;
          display: block;
          word-wrap: break-word;
        }

        .event__section {
          background-color: #fff;
          background-color: #fff;
          border-radius: 8px;
          border: 1px solid #e7eaf3;
          box-shadow: 0 0 35px rgba(127, 150, 174, 0.125);
          padding: 15px;
          width: calc(100% - 30px);
          margin: 25px 0px;
          text-align: left;
        }

        .event__section > label,
        .event__sub_section > label {
          display: block;
          color: #587299;
          font-weight: bold;
          font-size: 18px;
          text-transform: uppercase;
        }

        .event__section > p {
          margin: 0px;
        }

        .event__section > input {
          width: calc(100% - 10px);
          max-width: calc(100% - 10px);
          font-size: 18px;
          border-radius: 5px;
          border: 1px solid #e7eaf3;
          margin-top: 15px;
          padding: 8px 5px;
        }

        .event__section_textarea {
          width: calc(100% - 22px);
          margin-top: 15px;
          height: 120px;
          padding: 10px;
          border-radius: 5px;
          border: 1px solid #e7eaf3;
          font-family: "Roboto", sans-serif;
          font-size: 14px;
        }

        .event__sub_section {
          width: calc(50% - 52px);
          display: inline-block;
          margin: 10px;
          padding: 15px;
          border: 1px solid #e7eaf3;
          border-radius: 5px;
          vertical-align: top;
        }

        .event__sub_section > h3 {
          margin: 0px;
        }

        .chart {
          margin-top: 20px;
          //width: calc(100% - 20px);
          padding: 10px;
          border: 1px solid #e7eaf3;
          border-radius: 5px;
        }

        .loading__chart {
          text-align: center;
          padding: 50px 0px 30px 0px;
        }

        .loading__chart > h3 {
          color: #0f0857;
          font-size: 22px;
          margin-block-start: 10px;
          margin-block-end: 0px;
        }

        .private__label {
          color: #cc0000 !important;
        }

        @media screen and (max-width: 700px) {
          .event__sub_section {
            width: calc(100% - 52px);
          }
        }
      `}</style>
    </Layout>
  );
}

render() {
    const {
      ghData: {
        userJson,
        extraData: { warns },
      },
    } = this.props;
    const { chartData } = this.state;
    return (
      <div className="uk-container uk-padding">
        <div className="uk-card uk-card-default ">
          <div className="uk-card-header">
            <div className="uk-child-width-expand@s" uk-grid="true">
              <div className="uk-width-1-6@m">
                <img
                  src={userJson.avatar_url}
                  alt="profile-img"
                  uk-img="true"
                  className="avatar"
                />
              </div>
              <div className="uk-width-expand@m">
                <h3 className="uk-card-title uk-margin-remove-bottom">
                  {userJson.name}
                </h3>
                <p className="uk-text-muted uk-margin-remove-top">
                  {userJson.bio}
                </p>
                {this.renderContacts()}
              </div>
              <div className="uk-width-auto@m">{this.renderStats()}</div>
            </div>
          </div>
          <div className="uk-card-body">
            {typeof warns === "undefined" ? (
              <div uk-grid="true">
                {this.renderExtraData("about")}
                {this.renderExtraData("repos")}
                {this.renderExtraData("experience")}
              </div>
            ) : null}

            <div uk-grid="true">
              <div className="uk-width-1-2@s">
                <div>
                  <h3 className="uk-margin-remove-top">Languages</h3>
                  <hr />
                  <div style={{ height: 300 }}>
                    <HorizontalBar
                      data={{
                        labels: chartData.map((x) => x.name),
                        datasets: [
                          {
                            label: "Languages (%)",
                            data: chartData.map((x) => x.percentage.toFixed(2)),
                            backgroundColor: chartData.map((x) => x.color),
                            borderColor: chartData.map((x) => x.borderColor),
                            borderWidth: 2,
                          },
                        ],
                      }}
                      options={{
                        scales: {
                          xAxes: [
                            {
                              ticks: {
                                suggestedMax: 30,
                                suggestedMin: 0,
                              },
                            },
                          ],
                        },
                        responsive: true,
                        maintainAspectRatio: false,
                      }}
                    />
                  </div>
                </div>
                {this.renderOrgs()}
              </div>
              <div className="uk-width-1-2@s">{this.renderMostRepos()}</div>
            </div>
          </div>
          {this.renderWarnings()}
        </div>
      </div>
    );
  }

Poll = (props) => {
    const id = props.match.params.id;
    const {user} = UserSession();
    const uid = user.uid;
    const [label, setLabel] = useState([]);
    const [expiry, setExpiry] = useState(false);
    const [poll, setPoll] = useState(null);
    const [modal, setModal] = useState(false);
    const [pollData, setPollData] = useState([]);
    const [index, setIndex] = useState(-1);
    const handleURL = ()=>{
        navigator.clipboard.writeText("https://insta-poll-72ce3.web.app/" + poll.id);
        toast.success("URL copied to clipboard")
    }
    const showModal = () => {
        setModal(!modal);
      };
    const handleClick = (index)=>{
        setIndex(index);
      let x = poll;
      if(!x.votes[uid])
      {
        x.options.forEach((option)=>{
          if(option.index==index)
          option.count +=1;
      })
      }
      else if(x.votes[uid]!=index)
      {
        x.options.forEach((option)=>{
          if(option.index==(x.votes[uid]))
          {
            option.count-=1;
          }
          else if(option.index==index)
          {
            option.count+=1;
          }
        })
      }
          
          x.votes[uid] = index;
          updatePoll(x);
        
        
   

    }
    const handleLogout  = ()=>{
      firebase.auth().signOut().then(function() {
        }).catch(function(error) {
         
        });
  }
   useEffect(()=>{
       const docRef =  firestore.doc(`/polls/${id}`);
        const unsubscribe = docRef.onSnapshot((document)=>{
            if(document.exists)
            {   setPoll(document.data());
                let x=[], y=[];
              if(document.data().expire)
              {
                if((new Date().getTime()/1000)>=document.data().date.seconds)
                setExpiry(true);
              }
                document.data().options.forEach((option)=>{
                    x.push(option.title);
                    y.push(option.count)
                })
                if(document.data().votes && document.data().votes[uid])
                {
                    setIndex(document.data().votes[uid]);
                }
                setLabel(x);
                setPollData(y);
                
            }
            else
            {
              props.history.push("/not_found");
            }
        })
    }, [])

  
      
    const shareUrl = 'http://github.com';
    const data = {

        labels :label,
        datasets: [
          {
            label: 'Number of Votes',
            data: pollData,
            backgroundColor: [
              'rgba(255, 99, 132, 0.2)',
              'rgba(54, 162, 235, 0.2)',
              'rgba(255, 206, 86, 0.2)',
              'rgba(75, 192, 192, 0.2)',
              'rgba(153, 102, 255, 0.2)',
              'rgba(255, 159, 64, 0.2)',
            ],
            borderColor: [
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)',
            ],
            borderWidth: 1,
          },
        ],
      }
    
      const options = {
        scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true,
                precision:0,
                fontFamily:"Mulish",
                fontStyle: '500'
              },
              barPercentage:"0.4"
            },
       
           
          ],
          xAxes: [
            {
              ticks: {
                beginAtZero: true,
                precision:0,
                fontFamily:"Mulish",
                fontStyle:"500"
              },
            },
          ],
        },
        legend:{
            labels:{
                fontFamily: "Mulish"
            },
        },
       
        maintainAspectRatio: false
      
    }

if(!poll)
return( <div
style={{
  width: "100%",
  display: "flex",
  height: "100vh",
  alignItems: "center",
  justifyContent: "center",
  zIndex: "23444898429"
}}
>
<img src={Loader} />
</div>)
    return (
        <div>
          <div className="logout_grid">
            <div>
                <h1 className="head_title animate__animated animate__fadeIn">{poll.title} </h1>
                </div>
                <div>
                <Button type="primary" onClick={handleLogout} className="btn_logout"> Logout <LogoutOutlined /></Button>
                </div>
                </div>
                <Link to="/"><Button type="primary" className="create_btn" >Create a new Poll</Button></Link>
                <br/>
                <ToastContainer newestOnTop autoClose={2000}/>
             <div className="flex">
             <div className="options_div animate__animated animate__fadeInLeft">
         {expiry ? (<h2>This poll is no longer accepting responses ❌</h2>) : (<h2>Select an Option ?</h2>)}       
                {expiry ? (poll.options.map((option)=>{
                           if(option.index!=index)
                  return (
                    <div className="poll_live_expire">
                      {option.title}
                    </div>
                  )
                  else
                  return(
                    <div className="poll_live_expire_selected">
                    {option.title}
                  </div>
                  )
                })) :  (poll.options.map((option)=>
                {
                    if(option.index!=index)
                    return(
                        <div className="poll_live" onClick={()=>handleClick(option.index)}>
                        {option.title}
                    </div>
                    )
                    else
                    return(
                        <div className="poll_live_selected " onClick={()=>handleClick(option.index)}>
                        {option.title}
                    </div>
                    )
                }
                   
                ))}
             </div>
{index!=-1 && ( <div className="graph animate__animated animate__fadeInRight">
             <HorizontalBar data={data}  options={options} />
        </div>)}
            
            </div>
      <div className="share_icons animate__animated animate__fadeIn">
          <h3>Share this Poll <ShareAltOutlined /></h3>
        <TwitterShareButton
            url={`https://insta-poll-72ce3.web.app/${poll.id}`}
            title={`Vote to this poll titled "${poll.title}"  generated using Insta Poll\n`}
            className="share_icon"
          >
            <TwitterIcon size={32} round />
          </TwitterShareButton>
          <WhatsappShareButton
             url={`https://insta-poll-72ce3.web.app/${poll.id}`}
             title={`Vote to this poll titled "${poll.title}"  generated using Insta Poll`}
            separator=":: "
            className="share_icon"
  
          >
            <WhatsappIcon size={32} round  />
          </WhatsappShareButton>
          <FacebookShareButton
            url={`https://insta-poll-72ce3.web.app/${poll.id}`}
            title={`Vote to this poll titled "${poll.title}"  generated using Insta Poll`}
            className="share_icon"
       
          >
            <FacebookIcon size={32} round />
          </FacebookShareButton>
          <br/>
          <Input value={`https://insta-poll-72ce3.web.app/${poll.id}`} style={{width:"15rem"}} disabled/>
          <Button type="primary" onClick={handleURL}>Copy URL</Button>
          <Button type="primary" onClick={showModal} style={{margin:"0.5rem"}}>
          Share QR Code
        </Button>
          <Modal
          visible={modal}
          onOk={showModal}
          onCancel = {showModal}
                style={{textAlign:"center"}}
        >
            <QRCode value={`https://insta-poll-72ce3.web.app/${poll.id}`} style={{height:"12rem", width:"12rem"}}  />
             </Modal>
          </div>
        </div>
    )
}