在 mat-grid-tile 中正确调整 Angular 组件的大小

Question

我有几个 Angular 组件，我想在同一个网页上布局，所以我使用 Angular mat-grid-list 和 mat-grid-tiles 来做到这一点。但是，我遇到了尺寸问题。其中一个组件是带有图例的时间序列图，每当它在 mat-grid-tile 中渲染时，它会溢出框，而在另一个条形图中，框会填充不足。下面是一些示例代码：

时间序列组件.ts

import { Component, Input, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import * as d3 from 'd3';
import { ScaleOrdinal } from 'd3';

@Component({
  selector: 'time-series-component',
  templateUrl: './time-series-component.html',
  styleUrls: ['./time-series-component.component.scss'],
})
export class TimeSeriesComponent implements OnInit {
  private width = 1000;
  private height = 620;

  private svg: d3.Selection<SVGGElement, unknown, HTMLElement, any>;
  private xAxis: d3.ScaleTime<number, number>;
  private yAxis: d3.ScaleLinear<number, number>;

  ngOnInit(): void {
    this.createGroups();
    this.createLinePlot();
  }

  createGroups(): void {
    this.groupedData = d3.group(
      this.timeSeriesData,
      (d: TimeSeriesDatum) => d.id,
    );
  }

  createLinePlot(): void {
    this.createSVG();
    this.createAxes();
    this.addData();
    this.addClickableLegend();
  }

  createSVG(): void {
    this.svg = d3
      .select('#time-series-component')
      .append<SVGGElement>('svg')
      .classed('svg-content', true)
      .attr('viewBox', `0 0 ${this.width} ${this.height}`)
      .attr('preserveAspectRatio', 'xMidYMid meet')
      .append('g');
  }

  createAxes(): void {
    this.createX();
    this.createY();
    this.attachAxes();
    this.addAxisLabels();
  }

  createX(): void {
    this.xAxis = d3
      .scaleTime()
      .domain(
        d3.extent(this.timeSeriesData, (d: TimeSeriesDatum) =>
          this.parseDate(d.date),
        ),
      )
      .range([0, this.width]);
  }

  createY(): void {
    this.yAxis = d3
      .scaleLinear()
      .domain([
        0,
        d3.max(
          this.timeSeriesData,
          (d: TimeSeriesDatum) => d.yvalue,
        ),
      ])
      .range([this.height, 0]);
  }

  attachAxes(): void {
    this.svg
      .append('g')
      .attr('transform', `translate(30, ${this.height})`)
      .call(d3.axisBottom(this.xAxis))
      .style('font-size', '10px');
    this.svg.append('g').call(d3.axisLeft(this.yAxis));
  }

还有更多，但这是重要的东西。我还有 2 个这样的组件，我将它们放在 mat-grid-list 中进行布局（第一个组件跨越两列，接下来的两个在第一列下方一行，每个跨越 1 列）。 parent-component.ts 只是简单地收集数据，然后通过 html 将其传递给组件。

父.html

<div
  class="container"
  id="nlp-modeling"
  fxFlexFill
  fxLayout="column">

  <h1>Modeling
    <mat-icon class="info-icon" aria-hidden="false"
      matTooltip=
        "This analytic blah blah blah"
        matTooltipPosition="below">help_outline
      </mat-icon>
  </h1>

  <mat-grid-list cols="2">

    <mat-grid-tile
      [colspan]="2">

      <div class="container">
     
        <mat-grid-tile-header>
            <h2>Time Series</h2>
        </mat-grid-tile-header>

        <time-series-component
          *ngIf="timeSeriesData"
          [timeSeriesData]="timeSeriesData">
        </time-series-component>
  
      </div>

    </mat-grid-tile>

    <mat-grid-tile
      [colspan]="1">
      <div class="container">

        <mat-grid-tile-header>
          <h3>First Bar Chart</h3>
        </mat-grid-tile-header>

        <bar-chart-one
          *ngIf="barChartData1"
          [barChartData1]="barChartData1">
        </bar-chart-one>

      </div>

    </mat-grid-tile>

    <mat-grid-tile
      [colspan]="1">

      <div class="container">

        <mat-grid-tile-header>
          <h3>Second Bar Chart</h3>
        </mat-grid-tile-header>

        <bar-chart-two
          *ngIf="barChartData2"
          [barChartData2]="barChartData2">
        </bar-chart-two>

      </div>

    </mat-grid-tile>

  </mat-grid-list>

</div>

我只是不确定如何确保内容保留在每个 mat-grid-tiles 内。在某些情况下，绘图超出单元格的宽度，x 轴和/或 y 轴被截断。每个组件 html 文件都具有相同的结构：<div id="time-series-component" class="svg-container"></div>。我对如何将这些组件嵌入到 Angular mat-grid-list/mat-grid-tile 结构中有点迷茫。

Answer 1

解决方案之一就是创建一个防止溢出的类。所以尝试设置max-height和max-width：

.foo {
    max-height: inherit;
    max-width: inherit:
}

并应用它：

<mat-grid-tile
      [colspan]="1">
      <div class="container foo">

        <mat-grid-tile-header>
          <h3>First Bar Chart</h3>
        </mat-grid-tile-header>

        <bar-chart-one
          *ngIf="barChartData1"
          [barChartData1]="barChartData1">
        </bar-chart-one>

      </div>

</mat-grid-tile>