victory#VictoryPie JavaScript Examples

function EmissionsPie(props) {
  const data = props.data;
  const theme = useTheme();
  return (
    <svg viewBox="0 0 500 500" width="500px" height="500px">
      <VictoryPie
        style={{
          labels: { fill: "black", fontSize: 12, fontFamily: "lato" },
        }}
        colorScale={[
          theme.palette.primary.main,
          theme.palette.secondary.main,
          theme.palette.primary.dark,
          theme.palette.secondary.dark,
          theme.palette.primary.light,
          theme.palette.secondary.light,
        ]}
        innerRadius={75}
        standalone={false}
        animate={{ duration: 1000 }}
        width={400}
        height={400}
        origin={{ x: 250, y: 250 }}
        labels={({ datum }) =>
          `${datum.title} (${Math.floor(
            (100 * datum.y) / data.energyShare.total
          )}%)`
        }
        data={[
          { x: 1, y: data.energyShare.transport, title: "Transport" },
          { x: 2, y: data.energyShare.housing, title: "Housing" },
          { x: 3, y: data.energyShare.food, title: "Food" },
          { x: 4, y: data.energyShare.goods, title: "Goods" },
          { x: 5, y: data.energyShare.services, title: "Services" },
        ]}
      />
      <VictoryLabel
        textAnchor="middle"
        style={{
          fontSize: 15,
          backgroundColor: theme.palette.primary.main,
        }}
        x={250}
        y={250}
        text="CO2 Sources"
      />
    </svg>
  );
}

function WatchRoom() {
  let params = useParams();
  const [state, dispatch] = useReducer(reducer, initialState);
  let subscription;

  useEffect(() => {
    leaveRoom();
    fetchRoomEmotions();
    subscribe();
    return () => {
      subscription && subscription.unsubscribe();
    };
  }, []);

  async function fetchRoomEmotions() {
    // Only show faces updated in the past howManyMins
    // this helps people who exited their browser
    // but no final API call was made to clear them
    const howManyMins = 5;
    const past = new Date(Date.now() - 60000 * howManyMins);
    const searchSpec = {
      roomName: params.id,
      filter: {
        updatedAt: {
          gt: past.toISOString(),
        },
      },
    };

    let {
      data: {
        itemsByRoomName: { items: roomItems },
      },
    } = await API.graphql({
      query: itemsByRoomName,
      variables: searchSpec,
    });
    // console.log("roomItems", roomItems)
    dispatch({ type: "SET_ROOM_EMOTIONS", roomEmotions: roomItems });
  }

  function subscribe() {
    subscription = API.graphql({
      query: onUpdateByRoomId,
      variables: { id: params.id },
    }).subscribe({
      next: (apiData) => {
        fetchRoomEmotions();
      },
    });
  }

  const faceStats = getFaceStats(state.roomEmotions);
  return (
    <div>
      <section className="room">
        <img
          className="flourish"
          src="/flourish.svg"
          alt="beautiful flourish"
        />
        <h2 className="explainer">
          Watching
          <br />
          {params.id}
        </h2>
      </section>
      <section className="resultFramer">
        <EmptyMessage check={state.roomEmotions} />
        <VictoryPie
          animate={{
            duration: 200,
          }}
          style={{
            labels: { fontWeight: "bold", fontSize: 8, fill: "white" },
          }}
          labelRadius={({ innerRadius }) => innerRadius + 100}
          labelComponent={<CustomLabel />}
          colorScale={[
            "#295796",
            "#864074",
            "#a85eb3",
            "#752fb4",
            "#422eaf",
            "#637dc2",
            "#6b1d1e",
          ]}
          data={faceStats.chart}
          // data={demoChart}
        />
      </section>
      <h3 className="roomReport">
        There are {faceStats.total} people in the room
      </h3>
      <hr />
      <section id="explainerSection">
        <h2>What is this?</h2>
        <img src="/binoc.svg" id="explainWatch" alt="binoculars icon" />
        <p>
          This page is watching the audience members in room{" "}
          <a href={`/room/${params.id}`}>{params.id}</a>. The emotions of the
          people in that room will be sent here in real-time. Share the room URL
          with your audience members.
        </p>
        <h2>{window.location.href.replace("watch", "room")}</h2>
        <p>
          If you'd like to create your own room or understand more about this
          project, <a href="/">visit the main page</a>.
        </p>
      </section>
    </div>
  );
}

export default function Reports() {
    const classes = useStyles()
    const [error, setError] = useState('')
    const [expenses, setExpenses] = useState([])
    const jwt = auth.isAuthenticated()
    const date = new Date(), y = date.getFullYear(), m = date.getMonth()
    const [firstDay, setFirstDay] = useState(new Date(y, m, 1))
    const [lastDay, setLastDay] = useState(new Date(y, m + 1, 0))
    useEffect(() => {
        const abortController = new AbortController()
        const signal = abortController.signal
        averageCategories({firstDay: firstDay, lastDay: lastDay},{t: jwt.token}, signal).then((data) => {
          if (data.error) {
            setError(data.error)
          } else {
            setExpenses(data)
          }
        })
        return function cleanup(){
          abortController.abort()
        }
    }, [])
   
    const handleDateChange = name => date => {
        if(name=='firstDay'){
            setFirstDay(date)
        }else{
            setLastDay(date)
        }
    }
    const searchClicked = () => {
        averageCategories({firstDay: firstDay, lastDay: lastDay},{t: jwt.token}).then((data) => {
            if (data.error) {
              setRedirectToSignin(true)
            } else {
              setExpenses(data)
            }
        })
    }
    return (
      <div>
            <div className={classes.search}>
                <Typography variant="h6" className={classes.title}>Expenditures per category </Typography>
                <MuiPickersUtilsProvider utils={DateFnsUtils}>
                <DatePicker
                    disableFuture
                    format="dd/MM/yyyy"
                    label="FROM"
                    views={["year", "month", "date"]}
                    value={firstDay}
                    className={classes.textField}
                    onChange={handleDateChange('firstDay')}
                />
                <DatePicker
                    format="dd/MM/yyyy"
                    label="TO"
                    views={["year", "month", "date"]}
                    value={lastDay}
                    className={classes.textField}
                    onChange={handleDateChange('lastDay')}
                />      
        </MuiPickersUtilsProvider>
        <Button variant="contained" color="secondary" onClick={searchClicked}>GO</Button>
        </div>
      
                <div style={{width: 550, margin: 'auto'}}>
                <svg viewBox="0 0 320 320">
                
            <VictoryPie standalone={false} data={expenses.monthAVG} innerRadius={50} theme={VictoryTheme.material} 
                labelRadius={({ innerRadius }) => innerRadius + 14 }
                labelComponent={<VictoryLabel angle={0} style={[{
                    fontSize: '11px',
                    fill: '#0f0f0f'
                },
                {
                    fontSize: '10px',
                    fill: '#013157'
                }]} text={( {datum} ) => `${datum.x}\n $${datum.y}`}/>}
                 />
                 <VictoryLabel
          textAnchor="middle"
          style={{ fontSize: 14, fill: '#8b8b8b' }}
          x={175} y={170}
          text={`Spent \nper category`}
        />
        </svg>
                 </div>
        
                
        </div>
    )
  }