victory#VictoryLabel JavaScript Examples

function Chart({ xAxis, yAxis, children, ...rest }) {
  return (
    <VictoryChart theme={theme} { ...rest }>
      <VictoryAxis
        independentAxis
        gridComponent={<LineSegment y2={10} />}
        { ...xAxis }
      />

      <VictoryAxis
        dependentAxis
        tickLabelComponent={<VictoryLabel dy={-5} verticalAnchor={"end"} />}
        { ...yAxis }
      />

      {children}
    </VictoryChart>
  );
}

export default function MonthlyScatter() {
    const classes = useStyles()
    const [error, setError] = useState('')
    const [plot, setPlot] = useState([])
    const [month, setMonth] = useState(new Date())
    const jwt = auth.isAuthenticated()
    useEffect(() => {
        const abortController = new AbortController()
        const signal = abortController.signal

        plotExpenses({month: month},{t: jwt.token}, signal).then((data) => {
          if (data.error) {
            setError(data.error)
          } else {
            setPlot(data)
          }
        })
        return function cleanup(){
          abortController.abort()
        }
    }, [])
    const handleDateChange = date => {
        setMonth(date)
        plotExpenses({month: date},{t: jwt.token}).then((data) => {
          if (data.error) {
            setError(data.error)
          } else {
            setPlot(data)
          }
        })
    }

    return (
      <div style={{marginBottom: 20}}>
      <Typography variant="h6" className={classes.title}>Expenses scattered over </Typography> 
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
                 <DatePicker value={month} onChange={handleDateChange} views={["year", "month"]}
                 disableFuture
                    label="Month"
                    animateYearScrolling
                    variant="inline"/>
          </MuiPickersUtilsProvider>
        <VictoryChart
                theme={VictoryTheme.material}
                height={400}
                width={550}
                domainPadding={40}
                >
                    <VictoryScatter
                        style={{
                            data: { fill: "#01579b", stroke: "#69f0ae", strokeWidth: 2 },
                            labels: { fill: "#01579b", fontSize: 10, padding:8}
                        }}
                        bubbleProperty="y"
                        maxBubbleSize={15}
                        minBubbleSize={5}
                        labels={({ datum }) => `$${datum.y} on ${datum.x}th`}
                        labelComponent={<VictoryTooltip/>}
                        data={plot}
                        domain={{x: [0, 31]}}
                    />
                    <VictoryLabel
                      textAnchor="middle"
                      style={{ fontSize: 14, fill: '#8b8b8b' }}
                      x={270} y={390}
                      text={`day of month`}
                    />
                    <VictoryLabel
                      textAnchor="middle"
                      style={{ fontSize: 14, fill: '#8b8b8b' }}
                      x={6} y={190}
                      angle = {270} 
                      text={`Amount ($)`}
                    />
                </VictoryChart> 
        </div>
    )
  }

Chart = ({ data, footer, header }) => {
  if (not(data)) {
    return null;
  }
  if (data.every(value => not(value))) {
    return null;
  }
  const parsedData = data && data.length > 2 ? data.slice(0, 2) : data;

  const renderData = parsedData.map((values, index) => {
    const points = values.map((y, x) => ({
      x,
      y
    }));

    return (
      <VictoryArea
        data={points}
        height={80}
        // eslint-disable-next-line
        key={index}
        labels={({ datum }) => (parsedData.length >= 2 ? null : `+ ${numberWithSpaces(datum.y)}`)}
        labelComponent={<VictoryLabel renderInPortal verticalAnchor="middle" textAnchor="end" />}
        style={styles[index]}
      />
    );
  });

  return (
    <Styled.Wrapper>
      <Styled.Header>
        <Small color={Color.lightGray}>{header}</Small>
      </Styled.Header>

      {/* Number of values is provided by props in order to display only the last value on the chart */}
      {/* All data elements should have the same length at the moment (14 days) */}
      <Styled.Chart numberOfValues={data[0].length}>
        <VictoryChart height={80} padding={{ top: 15 }}>
          {renderData}
          <VictoryAxis style={{ axis: { stroke: Color.white } }} />
        </VictoryChart>
      </Styled.Chart>
      <Styled.Footer>
        <Small color={Color.lightGray}>{footer}</Small>
      </Styled.Footer>
    </Styled.Wrapper>
  );
}

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>
  );
}

HELData = () => {
  const [studentData, setStudentData] = React.useState({
    courseStats: []
  });
  const { courseStats } = studentData;
  let result = "";

  const HELstats = e => {
    e.preventDefault();
    let et = e.target.innerHTML.toLowerCase();
    let event = et.split(" ");
    event = event[0] + " " + event[1];

    try {
      axios.get(`/api/helData/searchHEL/${event}`).then(res => {
        resp = true;
        result = res.data.studentsInterestedInAllSlots;

        let newCSarray = [];
        if (result) {
          for (let i = 0; i < 8; i++) {
            newCSarray.push({ x: i + 1, y: result[i] });
          }
        }
        setStudentData({ ...studentData, courseStats: newCSarray });
      });
    } catch (err) {
      console.log("DB RETRIEVAL ERROR:", err);
    }
    if (courseStats.length === 0) return false;
    courseData = et;
    return true;
  };

  function filterItems(input) {
    const userInput = input.target.value.toLowerCase();
    let courses = JSON.parse(JSON.stringify(TimeTableData)).default;
    let filterCourses = obj =>
      Object.keys(obj)
        .filter(
          item =>
            item.toLowerCase().search(userInput) !== -1 ||
            obj[item]["name"].toLowerCase().search(userInput) !== -1
        )
        .filter(
          code =>
            code.startsWith("GS") ||
            code.startsWith("HSS") ||
            code.startsWith("BITS F214") ||
            code.startsWith("BITS F385") ||
            code.startsWith("BITS F399")
        )
        .reduce((res, key) => {res[key] = obj[key]; return res}, {});
    humCourses = filterCourses(courses);
    setStudentData({ ...studentData }); //force component update
  }

  let resp = true;
  let str = [
    <div style={{ float: "right", width: "35%" }}>
      <Search action={filterItems} />
      <ItemList
        items={humCourses}
        action={e => {
          HELstats(e);
        }}
      />
    </div>
  ];
  const [, loading] = useGetData("/api/heldata/searchHEL/:name");
  if (!loading) {
    if (resp === true && courseStats.length > 0) {
      let max = 0;
      for (let i of courseStats) max = i["y"] > max ? i["y"] : max;
      str.push([
        <div style={{ float: "left", width: "64%" }}>
          <VictoryChart domainPadding={10} animate={{ duration: 2000 }}>
            <VictoryAxis
              tickValues={[1, 2, 3, 4, 5, 6, 7, 8]}
              tickFormat={[
                "Slot 1",
                "Slot 2",
                "Slot 3",
                "Slot 4",
                "Slot 5",
                "Slot 6",
                "Slot 7",
                "Slot 8"
              ]}
            />
            <VictoryAxis
              dependentAxis
              tickCount={max < 3 ? 2 : 5}
              tickFormat={x => x}
            />
            <VictoryBar
              data={courseStats}
              labels={({ datum }) => {
                if (datum.y > 0) return Math.round(datum.y);
                else return null;
              }}
              style={{ labels: { fill: "black" } }}
              labelComponent={<VictoryLabel />}
            />
          </VictoryChart>
        </div>
      ]);
    } else if (resp === false || courseStats.length === 0) {
      str.push([
        <div>
          <h3>No data available for this course!</h3>
        </div>
      ]);
    }
  } else {
    str.push([<h2>LOADING....</h2>]);
  }
  return <>{str}</>;
}

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>
    )
  }

render() {
    const { items, loading, negICD10s, posICD10s, searchQuery } = this.state
    return (
      <div className="App">
        { 
          !!loading && (
            <p>Searching...</p>
          )
        }
        { 
          !loading && !items.length && (
            <p>Sorry, no results.</p>
          )
        }
        <Grid container devided='vertically'>
          {
            !loading && (
              <Grid.Row columns={2} padded>
                <Grid.Column>
                  <VictoryChart theme={VictoryTheme.material}>
                    <VictoryBar  
                      horizontal
                      style={{ data: { fill: "Green" }, labels: { fontSize: 12 }}} 
                      // labelComponent={<VictoryLabel textAnchor="end" dx={0} dy={10} />}
                      data={posICD10s}/>
                    <VictoryAxis tickFormat={() => ''} />
                    <VictoryLabel x={100} y={30} text="Positive ICD10 CMs" />
                  </VictoryChart>
                </Grid.Column>
                <Grid.Column>
                  <VictoryChart theme={VictoryTheme.material}>
                    <VictoryBar 
                      horizontal 
                      style={{ data: { fill: "Red" }, labels: { fontSize: 12 } }} 
                      labelComponent={<VictoryLabel textAnchor="start" dx={0} />}
                      data={negICD10s}/>
                    <VictoryAxis tickFormat={() => ''} />
                    <VictoryLabel x={100} y={30} text="Negative ICD10 CMs" />
                  </VictoryChart>
                </Grid.Column>
              </Grid.Row>
            )
          }

          <Grid.Row columns={1} padded>
            <Grid.Column><Header size='large'>Search Terms</Header></Grid.Column>
          </Grid.Row>
          <Grid.Row columns={1} padded>
            <Grid.Column><Input
              fluid
              size='big'
              icon='search'
              onChange={this.onChange.bind(this)}
              placeholder='Search for Findings in Radiology Report'
            /></Grid.Column>
          </Grid.Row>

          { 
            !loading && items.map((item, index) => (
              <Grid.Row columns={2}>
                <Grid.Column>
                  <Header>Impression: {item.Impression}</Header>
                  <List horizontal>
                    {
                      item.Images.map(
                        (image,i) => 
                          <List.Item key={i}> 
                            <Link to={`/Image/${image.ImageId}`}>
                              <S3Image key={i} imgKey={image.Key} level='public' theme={{ photoImg: { height: '200px', width: '200px' } }}/>
                            </Link>
                          </List.Item>
                      )
                    }
                  </List>
                </Grid.Column>
                <Grid.Column>
                  <Segment.Group horizontal>
                      <Segment padded color='yellow'>
                        <Header>Signs</Header>
                          {item.PositiveSigns.map(
                            (posSigns, i) => 
                              <List.Item key={i}> 
                                <p style={{ color: 'green' }}>{posSigns}</p>
                              </List.Item>
                          )}
                          {item.NegativeSigns.map(
                            (negSigns, i) => 
                              <List.Item key={i}> 
                                <p style={{ color: 'red' }}>{negSigns}</p>
                              </List.Item>
                          )}
                      </Segment>
                      <Segment padded color='yellow'>
                        <Header>Diagnoses</Header>
                          {item.PositiveDiagnoses.map(
                            (positiveDiag, i) => 
                              <List.Item key={i}> 
                                <p style={{ color: 'green' }}>{positiveDiag}</p>
                              </List.Item>
                          )}
                          {item.NegativeDiagnoses.map(
                            (negativeDiag, i) => 
                              <List.Item key={i}> 
                                <p style={{ color: 'red' }}>{negativeDiag}</p>
                              </List.Item>
                          )}
                      </Segment>
                      <Segment padded color='yellow'>
                        <Header>Symptoms</Header>
                          {item.PositiveSymptoms.map(
                            (positiveSymp, i) => 
                              <List.Item key={i}> 
                                <p style={{ color: 'green' }}>{positiveSymp}</p>
                              </List.Item>
                          )}
                          {item.NegativeSymptoms.map(
                            (negativeSymp, i) => 
                              <List.Item key={i}> 
                                <p style={{ color: 'red' }}>{negativeSymp}</p>
                              </List.Item>
                          )}
                      </Segment>
                  </Segment.Group>
                </Grid.Column>
              </Grid.Row>
            ))
          }
        </Grid>
      </div>
    );
  }