dun

DUN.js

import React, { useEffect, useState } from "react";
import AdUnit from "../AdUnit";
import NavList from "../NavList";
import Footer from "../theme/Footer";
import Header from "../theme/Header";
import Chart from "react-apexcharts";
import OwlCarousel from "react-owl-carousel";
import "owl.carousel/dist/assets/owl.carousel.css";
import "owl.carousel/dist/assets/owl.theme.default.css";
import TabPanel from "../TabPanel";
import ResultSummaryUnit from "../ResultSummaryUnit";
import { useDispatch, useSelector } from "react-redux";
import {
  getDUNResults,
  DUNResultData,
  selectDUNState,
  selectDUNStateFlag,
  selectDUNYear,
  setDUNYear,
  selectDUNSeats,
  selectDUNSeat,
  getDUNSeatResult,
  selectDUNGraphData,
  setDUNSeat,
  setDUNSeats,
  selectDUNSeatCandidates,
} from "../../store/Results/resultsSlice";

const summaryData1 = [
  {
    name: "TEH CHAI AAN",
    party: "Barisan Nasional",
    jumlah_undi: "2,762",
    majoriti: "142",
    flag: "images/my/parti/umno.png",
  },
  {
    name: "TEH CHAI AAN",
    party: "Barisan Nasional",
    jumlah_undi: "2,762",
    majoriti: "142",
    flag: "images/my/parti/pkr.png",
  },
  {
    name: "TEH CHAI AAN",
    party: "Barisan Nasional",
    jumlah_undi: "2,762",
    majoriti: "142",
    flag: "images/my/parti/bebas.png",
  },
];

const DUN = () => {
  const dispatch = useDispatch();
  const [DUNStates, setDUNStates] = useState([]);
  useEffect(() => {
    (async () => {
      await fetch(`http://localhost:3000/api/v1/results/dun/states`)
        .then((res) => res.json())
        .then((result) => {
          setDUNStates(result.states);
        });
    })();
  }, []);
  const DUNState = useSelector(selectDUNState);
  const ResultData = useSelector(DUNResultData);
  const DUNStateFlag = useSelector(selectDUNStateFlag);
  const DUNYear = useSelector(selectDUNYear);
  const DUNSeat = useSelector(selectDUNSeat);
  const DUNSeatCandidates = useSelector(selectDUNSeatCandidates);

  useEffect(() => {
    /**Fetch seats based on state and year */
    (async () => {
      await fetch(
        `http://localhost:3000/api/v1/results/dun/seats?year=${DUNYear}&state=${DUNState}`
      )
        .then((res) => res.json())
        .then((result) => {
          dispatch(setDUNSeats(result.seats));
        });
    })();
  }, [dispatch, DUNState, DUNYear]);

  const DUNSeats = useSelector(selectDUNSeats);
  const DUNGraphData = useSelector(selectDUNGraphData);

  useEffect(() => {
    dispatch(setDUNSeat(DUNSeats[0]));
  }, [dispatch, DUNSeats]);

  const [options1, setOptions1] = useState({
    chart: {
      id: "chart2",
      type: "bar",
      height: 42,
      stacked: true,
      stackType: "100%",
      sparkline: {
        enabled: true,
      },
    },
    plotOptions: {
      bar: {
        horizontal: true,
      },
    },
    stroke: {
      width: 1,
      colors: ["#fff"],
    },
    xaxis: {
      categories: [""],
    },
    tooltip: {
      y: {
        formatter: function (val) {
          return val;
        },
      },
    },
    fill: {
      opacity: 1,
      colors: [
        function ({ seriesIndex, w }) {
          if (w.config.series[seriesIndex].name === "BN") {
            return "#170080";
          } else if (w.config.series[seriesIndex].name === "DAP") {
            return "#3aace3";
          } else if (w.config.series[seriesIndex].name === "PAS") {
            return "#128b07";
          } else {
            return "#575757";
          }
        },
      ],
    },
  });

  const options2 = {
    chart: {
      id: "chart2",
      type: "bar",
      height: 42,
      stacked: true,
      stackType: "100%",
      sparkline: {
        enabled: true,
      },
    },
    plotOptions: {
      bar: {
        horizontal: true,
      },
    },
    stroke: {
      width: 1,
      colors: ["#fff"],
    },
    xaxis: {
      categories: ["Parlimen"],
    },
    tooltip: {
      y: {
        formatter: function (val) {
          return val;
        },
      },
    },
    fill: {
      opacity: 1,
      colors: [
        function ({ seriesIndex, w }) {
          if (w.config.series[seriesIndex].name === "BN") {
            return "#170080";
          } else if (w.config.series[seriesIndex].name === "DAP") {
            return "#3aace3";
          } else if (w.config.series[seriesIndex].name === "PAS") {
            return "#128b07";
          } else {
            return "#575757";
          }
        },
      ],
    },
  };

  useEffect(() => {
    var containerEl = document.querySelector(".containerz");
    window.mixitup(containerEl, {
      selectors: {
        control: "[data-mixitup-control]",
      },
      load: {
        filter: ".red",
      },
    });
  }, []);

  useEffect(() => {
    dispatch(getDUNResults({ DUNState: DUNState, year: DUNYear }));
    dispatch(getDUNSeatResult({ year: DUNYear, bpr: DUNSeat }));
    setOptions1({
      chart: {
        id: "chart2",
        type: "bar",
        height: 42,
        stacked: true,
        stackType: "100%",
        sparkline: {
          enabled: true,
        },
      },
      plotOptions: {
        bar: {
          horizontal: true,
        },
      },
      stroke: {
        width: 1,
        colors: ["#fff"],
      },
      xaxis: {
        categories: [DUNSeat ? DUNSeat : ""],
      },
      tooltip: {
        y: {
          formatter: function (val) {
            return val;
          },
        },
      },
      fill: {
        opacity: 1,
        colors: [
          function ({ seriesIndex, w }) {
            if (w.config.series[seriesIndex].name === "BN") {
              return "#170080";
            } else if (w.config.series[seriesIndex].name === "DAP") {
              return "#3aace3";
            } else if (w.config.series[seriesIndex].name === "PAS") {
              return "#128b07";
            } else {
              return "#575757";
            }
          },
        ],
      },
    });
  }, [DUNState, DUNYear, DUNSeat, dispatch]);

  return (
    <div>
      <Header />
      <div className="shows">
        <div className="container">
          <div className="row shows_row">
            {/* Show */}
            <div className="col-lg-3 top">
              <div className="bg-white show_wrap">
                <div className="title">
                  <h4>SENARAI PARLIMEN</h4>
                </div>
                <div className="row">
                  <div className=" col-lg-12">
                    <div id="demo">
                      <section id="examples">
                        <NavList list={DUNStates} type="DUN" />
                      </section>
                    </div>
                  </div>
                </div>
              </div>
              <div className="ads mt-4 text-center">
                <AdUnit ad="ad2" />
              </div>
            </div>
            <div className="col-lg-9 tops">
              <div className="bg-white show_wrap mb-4">
                <div className="title d-lg-flex d-md-flex align-items-center justify-content-between">
                  <div className="mb-3 mb-lg-0 mb-md-0 d-flex align-items-center">
                    <img src={DUNStateFlag} alt="" />
                    <h4>{DUNState}</h4>
                  </div>
                  <ul
                    id="myTabs"
                    className="nav nav-pills nav-justified"
                    role="tablist"
                    data-tabs="tabs"
                  >
                    <li>
                      <a
                        href="#pru14"
                        data-toggle="tab"
                        className={DUNYear === "2004" ? "active show" : ""}
                        onClick={() => dispatch(setDUNYear("2004"))}
                      >
                        PRU 14
                      </a>
                    </li>
                    <li>
                      <a
                        href="#pru13"
                        data-toggle="tab"
                        className={DUNYear === "1999" ? "active show" : ""}
                        onClick={() => dispatch(setDUNYear("1999"))}
                      >
                        PRU 13
                      </a>
                    </li>
                    <li>
                      <a
                        href="#pru11"
                        data-toggle="tab"
                        className={DUNYear === "1995" ? "active show" : ""}
                        onClick={() => dispatch(setDUNYear("1995"))}
                      >
                        PRU 11
                      </a>
                    </li>
                    <li>
                      <a
                        href="#pru10"
                        data-toggle="tab"
                        className={DUNYear === "1990" ? "active show" : ""}
                        onClick={() => dispatch(setDUNYear("1990"))}
                      >
                        PRU 10
                      </a>
                    </li>
                  </ul>
                </div>
                <div className="dtitle col-lg-12 text-center py-4">
                  <h3>
                    KEDUDUKAN DEWAN UNDANGAN NEGERI: <b>{DUNState}</b>
                  </h3>
                </div>

                <div className="row tab-content">
                  <TabPanel
                    pru="pru14"
                    active
                    options={options2}
                    series={ResultData}
                    summary={summaryData1}
                  />
                </div>
              </div>
              <div className="bg-white show_wrap">
                <div className="title d-flex align-items-center">
                  <h4>KEDUDUKAN KERUSI BAGI DUN</h4>
                </div>
                <div className="row">
                  <div className=" col-lg-12">
                    <OwlCarousel
                      className="controls menu_slider owl-carousel justify-content-center text-left align-items-center py-3"
                      margin={10}
                      dots={false}
                      nav
                      navElement="div"
                      navText={[
                        "<i class='fa fa-angle-left'></i>",
                        "<i class='fa fa-angle-right'></i>",
                      ]}
                      smartSpeed="1500"
                      responsiveClass
                      responsive={{
                        0: {
                          items: 2,
                        },
                        400: {
                          items: 3,
                        },
                        575: {
                          items: 3,
                        },
                        768: {
                          items: 6,
                        },
                        992: {
                          items: 5,
                        },
                      }}
                      items="6"
                      style={{ padding: "0px 24px" }}
                    >
                      {DUNSeats.map((data) => {
                        return (
                          <button
                            key={data}
                            type="button"
                            data-mixitup-control
                            className={
                              DUNSeat === data
                                ? "control mixitup-control-active"
                                : "control"
                            }
                            onClick={() => dispatch(setDUNSeat(data))}
                            data-filter=".red"
                          >
                            {data}
                          </button>
                        );
                      })}
                    </OwlCarousel>
                  </div>
                  <div className="containerz col-lg-12">
                    <div className="mix red mb-4">
                      <div className="row align-items-center justify-content-center text-center">
                        <div className="col-lg-12">
                          <div
                            style={{
                              padding: "30px 0px",
                              background: "#e8e8e8",
                            }}
                          >
                            <Chart
                              className="ml-4 mr-4"
                              options={options1}
                              series={DUNGraphData}
                              type="bar"
                              height="42"
                            />
                          </div>
                        </div>
                      </div>
                      <div className="row mt-4">
                        <div className=" col-lg-12">
                          <ResultSummaryUnit summary={DUNSeatCandidates} />
                        </div>
                      </div>
                    </div>
                    <div className="mix green mb-4">
                      <div className="row align-items-center justify-content-center text-center">
                        <div className="col-lg-12">
                          <div
                            style={{
                              padding: "30px 0px",
                              background: "#e8e8e8",
                            }}
                          >
                            <Chart
                              className="ml-4 mr-4"
                              options={options1}
                              series={DUNGraphData}
                              type="bar"
                              height="42"
                            />
                          </div>
                        </div>
                      </div>
                      <div className="row mt-4">
                        <div className=" col-lg-12">
                          <ResultSummaryUnit summary={DUNSeatCandidates} />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="py-4">
          <div className="container">
            <div className="row align-items-center justify-content-center text-center">
              <div className="col-lg-12">
                <AdUnit ad="ad1" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <Footer />
    </div>
  );
};

export default DUN;