@material-ui/core#WithWidth TypeScript Examples

The following examples show how to use @material-ui/core#WithWidth. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: DashboardHome.tsx From clearflask with Apache License 2.0
4 votes
class DashboardHome extends Component<Props & ConnectProps & WithTranslation<'site'> & WithStyles<typeof styles, true> & RouteComponentProps & WithWidth, State> {
  state: State = {};
  readonly dispatchedCategoryAggregateForIds = new Set<string>();

  constructor(props) {
    super(props);

    props.callOnMount?.();
  }

  getAggregate(categoryId: string): Admin.IdeaAggregateResponse | undefined {
    if (!this.dispatchedCategoryAggregateForIds.has(categoryId)) {
      this.dispatchedCategoryAggregateForIds.add(categoryId);
      this.props.server.dispatchAdmin()
        .then(d => d.ideaCategoryAggregateAdmin({
          projectId: this.props.server.getProjectId(),
          categoryId: categoryId,
        })).then(results => this.setState({
          [statePrefixAggregate + categoryId]: results,
        }));
    }
    return this.state[statePrefixAggregate + categoryId] as Admin.IdeaAggregateResponse | undefined;
  }

  render() {
    const feedbackAggregate = !this.props.feedback ? undefined
      : this.getAggregate(this.props.feedback.categoryAndIndex.category.categoryId);

    const chartWidth = 100;
    const chartHeight = 50;
    const chartXAxis = {
      min: moment().subtract(7, 'd').toDate(),
      max: new Date(),
    };
    return (
      <div className={this.props.classes.page}>
        <div className={this.props.classes.stats}>
          <div className={this.props.classes.stats}>
            {!!this.props.feedback && !!feedbackAggregate && (
              <Histogram
                key='Open feedback'
                icon={OpenIdeasIcon}
                title={this.props.t('open-feedback')}
                server={this.props.server}
                className={this.props.classes.stat}
                chartWidth={chartWidth}
                chartHeight={chartHeight}
                xAxis={chartXAxis}
                search={d => d.ideaHistogramAdmin({
                  projectId: this.props.server.getProjectId(),
                  ideaHistogramSearchAdmin: {
                    interval: Admin.HistogramInterval.DAY,
                    filterCreatedStart: moment().subtract(7, 'd').toDate(),
                  }
                }).then(histogramResults => ({
                  ...histogramResults,
                  // Quick hack to show histogram of all feedback, but show a count
                  // of only the open/new/unaddressed feedback
                  hits: {
                    value: feedbackAggregate.statuses[
                      this.props.feedback?.categoryAndIndex.category.workflow.entryStatus
                      || this.props.feedback?.categoryAndIndex.category.workflow.statuses[0]?.statusId
                      || ''
                    ] || 0,
                  },
                }))}
              />
            )}
            {!!this.props.roadmap?.statusIdCompleted && (
              <Histogram
                key='Completed Tasks'
                icon={AllIdeasIcon}
                title={this.props.t('completed-tasks')}
                server={this.props.server}
                className={this.props.classes.stat}
                chartWidth={chartWidth}
                chartHeight={chartHeight}
                xAxis={chartXAxis}
                search={d => d.ideaHistogramAdmin({
                  projectId: this.props.server.getProjectId(),
                  ideaHistogramSearchAdmin: {
                    filterCategoryIds: [this.props.roadmap!.categoryAndIndex.category.categoryId],
                    filterStatusIds: [this.props.roadmap!.statusIdCompleted!],
                    interval: Admin.HistogramInterval.DAY,
                    filterCreatedStart: moment().subtract(7, 'd').toDate(),
                  }
                })}
              />
            )}
          </div>
          <div className={this.props.classes.stats}>
            <Histogram
              key='Identified Users'
              icon={UsersIcon}
              title={this.props.t('identified-users')}
              server={this.props.server}
              className={this.props.classes.stat}
              chartWidth={chartWidth}
              chartHeight={chartHeight}
              xAxis={chartXAxis}
              search={d => d.userHistogramAdmin({
                projectId: this.props.server.getProjectId(),
                histogramSearchAdmin: {
                  interval: Admin.HistogramInterval.DAY,
                  filterCreatedStart: moment().subtract(7, 'd').toDate(),
                }
              })}
            />
            <Histogram
              key='Comments'
              icon={DiscussionIcon}
              title={this.props.t('comments')}
              server={this.props.server}
              className={this.props.classes.stat}
              chartWidth={chartWidth}
              chartHeight={chartHeight}
              xAxis={chartXAxis}
              search={d => d.commentHistogramAdmin({
                projectId: this.props.server.getProjectId(),
                histogramSearchAdmin: {
                  interval: Admin.HistogramInterval.DAY,
                  filterCreatedStart: moment().subtract(7, 'd').toDate(),
                }
              })}
            />
          </div>
        </div>
        {/* For now, workflow previews are disabled, they were kind of ugly here
        const workflowPreviewRenderAggregateLabel = (aggr: Admin.IdeaAggregateResponse) => (statusId: string | 'total', name: string) => `${name} (${statusId === 'total' ? aggr.total : aggr.statuses[statusId] || 0})`;
        const workflowPreviewDimensions = { width: 700, height: 200 };
        <div className={classNames(
          this.props.classes.stats,
          this.props.classes.scrollVertical,
        )}>
          {!!this.props.feedback && !!feedbackAggregate && (
            <GraphBox
              title={workflowPreviewRenderAggregateLabel(feedbackAggregate)('total', 'Feedback')}
              chartAsBackground={workflowPreviewDimensions}
              chart={(
                <WorkflowPreview
                  static
                  width={workflowPreviewDimensions.width}
                  height={workflowPreviewDimensions.height}
                  editor={this.props.editor}
                  categoryIndex={this.props.feedback.categoryAndIndex.index}
                  hideCorner
                  renderLabel={workflowPreviewRenderAggregateLabel(feedbackAggregate)}
                />
              )}
            />
          )}
          {!!this.props.roadmap && !!roadmapAggregate && (
            <GraphBox
              title={workflowPreviewRenderAggregateLabel(roadmapAggregate)('total', 'Tasks')}
              chartAsBackground={workflowPreviewDimensions}
              chart={(
                <WorkflowPreview
                  static
                  width={workflowPreviewDimensions.width}
                  height={workflowPreviewDimensions.height}
                  editor={this.props.editor}
                  categoryIndex={this.props.roadmap.categoryAndIndex.index}
                  hideCorner
                  renderLabel={workflowPreviewRenderAggregateLabel(roadmapAggregate)}
                />
              )}
            />
          )}
        </div> */}
      </div>
    );
  }
}