Function GraphsWrapper

web/pgadmin/dashboard/static/js/Graphs.jsx:246–287

(props)

};

export function GraphsWrapper(props) {
  const options = useMemo(()=>({
    showDataPoints: props.showDataPoints,
    showTooltip: props.showTooltip,
    lineBorderWidth: props.lineBorderWidth,
    theme: props.theme,
  }), [props.showTooltip, props.showDataPoints, props.lineBorderWidth, props.theme]);
  return (
    <>
      <Grid container spacing={0.5}>
        <Grid size={{ md: 6 }}>
          <ChartContainer id='sessions-graph' title={props.isDatabase ?  gettext('Database sessions') : gettext('Server sessions')}
            datasets={props.sessionStats.datasets} errorMsg={props.errorMsg} isTest={props.isTest}>
            <StreamingChart data={props.sessionStats} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options} valueFormatter={(v)=>toPrettySize(v, '')}/>
          </ChartContainer>
        </Grid>
        <Grid size={{ md: 6 }}>
          <ChartContainer id='tps-graph' title={gettext('Transactions per second')} datasets={props.tpsStats.datasets} errorMsg={props.errorMsg} isTest={props.isTest}>
            <StreamingChart data={props.tpsStats} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options} valueFormatter={(v)=>toPrettySize(v, '')}/>
          </ChartContainer>
        </Grid>
      </Grid>
      <Grid container spacing={0.5} style={{marginTop: '4px', marginBottom: '4px'}}>
        <Grid size={{ md: 4 }}>
          <ChartContainer id='ti-graph' title={gettext('Tuples in')} datasets={props.tiStats.datasets} errorMsg={props.errorMsg} isTest={props.isTest}>
            <StreamingChart data={props.tiStats} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options} valueFormatter={(v)=>toPrettySize(v, '')}/>
          </ChartContainer>
        </Grid>
        <Grid size={{ md: 4 }}>
          <ChartContainer id='to-graph' title={gettext('Tuples out')} datasets={props.toStats.datasets} errorMsg={props.errorMsg} isTest={props.isTest}>
            <StreamingChart data={props.toStats} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options} valueFormatter={(v)=>toPrettySize(v, '')}/>
          </ChartContainer>
        </Grid>
        <Grid size={{ md: 4 }}>
          <ChartContainer id='bio-graph' title={gettext('Block I/O')} datasets={props.bioStats.datasets}  errorMsg={props.errorMsg} isTest={props.isTest}>
            <StreamingChart data={props.bioStats} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options} valueFormatter={(v)=>toPrettySize(v, '')}/>
          </ChartContainer>
        </Grid>
      </Grid>
    </>
  );
}

const propTypeStats = PropTypes.shape({
  datasets: PropTypes.array,