@subarroca我过去曾与几个人谈论过这样的组件——所以我觉得这将是图书馆的一个很好的补充。
在开始实施之前，请先创建一个 API 提案。

最初的想法和问题：

• 图例必须是可选的
• 也许图例中的条形图标不是正确的。
• 工具提示应该与其他图表类似，并获取 ng-template 中提供的上下文。
• 我们需要确保并非所有元素都可以隐藏 - 始终至少需要存在一个元素。
• 选择颜色是什么？ 只要我们没有超过 3 个指标，图表就应该是主题颜色 - 与其他图表相同。 选择颜色来自哪里？ 我们在主题中没有那个。

我们过去面临的主要挑战是，它需要以一种连接的方式工作（例如，在表格列中）。
这里的挑战是特定指标应该在所有连接的实例中获得相同的颜色，即
第 1 行显示：metricA 蓝色、metricB 红色、metricC 黄色
第 2 行显示：metricA 蓝色，metricC 黄色

这有点违背我们当前的图表着色系统，这就是为什么我们仍然遇到这个问题的原因。

也许我们需要让开发人员以相同的方式为行中的相同指标着色。 简单用例和连接用例的自动着色，需要在系列上设置颜色。

<dt-single-stacked-bar
  [series]="series"
  [selected]="selected"
  (selectedChange)="onSelect($event)"
  valueDisplayMode="percent"
  [visibleLegend]="false"
  >
  <div dtSingleStackedBarOverlay>...</div>
</dt-single-stacked-bar>

输入

• series: DtSingleStackedBarNode[]要显示的信息节点
• selected: DtSingleStackedBarNode节点被选中
• valueDisplayMode: DtChartValueMode值的显示格式。 默认DtChartValueMode.ABSOLUTE
• visibleLegend: boolean是否应该显示图例。 默认值：真

输出

• selectedChange: 事件发射器已选择DtSingleStackedBarNode

内容投影

• dtSingleStackedBarOverlay

楷模

interface DtSingleStackedBarNode {
  label: string;
  value: number;
  color?: DtColors | string;
}

• label要在图表中显示的标签
• value要在图表中表示的绝对或相对数字
• 颜色可选。 如果颜色应该覆盖分配的颜色，请在此处设置

export enum DtChartValueMode {
  ABSOLUTE = 'absolute',
  PERCENT = 'percent',
}

颜色

• 如果 3 或更少，则应遵循主题
• 如果超过 3 个，则应遵循通用图表调色板
• 如果用户指定颜色，则覆盖颜色
• 选择的颜色应该是青绿色

传奇

• 应该显示一个共同的项目符号
• 应该显示标签和值

待定

• 当所有节点都被禁用时会发生什么？

嗨@subarroca！
到目前为止，API 提案看起来不错。 我想讨论几件事。

输入

visibleLegend: boolean 是否显示图例。 默认值：真

我认为我们应该考虑将 SingleStackedBarChart 连接到 dt-legend 并让消费者定义要呈现图例的位置。 我正在考虑表格行中 SingleStackedBarChart 的用例，在表格本身的末尾，它显示了图表的图例。
然而，这会导致图表之间进行必要的通信，以同步它们的系列和颜色，如https://github.com/dynatrace-oss/barista/issues/884#issuecomment -614602707 中所述。 一种解决方法是不让系列不自动遵循图表颜色，而是让用户定义图表颜色。

楷模

value 要在图表中表示的绝对或相对数字

请使用联合类型'percent' | 'absolute'作为值而不是枚举。

嗨@tomheller！ 我对提案进行了一些更改，以使其更适合。
我正在使用DtSingleStackedBarChartValueDisplayMode这是

export type DtSingleStackedBarChartValueDisplayMode =
  | 'none'
  | 'absolute'
  | 'percent';

这对你有用还是你不喜欢这种类型？

此外，我还添加了selectable ，因为并非在每种情况下您都希望将其用作可选图表。

颜色是使用getDtChartColorPalette自动获取的，但如果任何节点有颜色，它只会覆盖分配的颜色。

关于图例的使用。 我已经把它放在模板中了。 我是否需要连接它或以某种方式公开图例？

这对你有用还是你不喜欢这种类型？

这对我来说非常有效，:+1:

我还添加了可选择的，因为并非在每种情况下您都想将其用作可选择的图表。

这也适用于我，您能否也反映您评论中的更改，所以我们在这里有一个最新的单一来源https://github.com/dynatrace-oss/barista/issues/884#issuecomment -614605963

关于图例的使用。 我已经把它放在模板中了。 我是否需要连接它或以某种方式公开图例？

我试图说明的是，多个图表可以共享一个图例。 这就是为什么我认为我们不能将图例嵌入图表本身，但需要做这样的事情。 想象一个表或任何其他类型的重复数据表示，其中行在语义上是连接的。

<dt-dummy-table>
  <dt-dummy-row *ngFor="let row of rows">
     <dt-single-stacked-bar [series]="row.series" legend="dummyTableLegend">
     </dt-single-stacked-bar>
  </dt-dummy-row>
</dt-dummy-table>
<dt-single-stacked-bar-legend #dummyTableLegend>
  <!-- ... ? -->
</dt-single-stacked-bar-legend>

这样，您就不想在每一行中呈现图例，而是在表格的末尾，收集所有系列点并显示它们的图标和标签。
这就是为什么不可能按图表自动提取图表颜色的原因，因为它们需要在同一系列的表中的所有图表中具有相同的颜色。 即使，例如在第 7 行，缺少一个系列。

我希望这是可以理解的？

是的，完全可以理解。 我以为您想与图例交互并隐藏或显示图表中的元素。

一会儿我会更新定义

<dt-single-stacked-bar
  [series]="series"
  [selected]="selected"
  (selectedChange)="onSelect($event)"
  valueDisplayMode="percent"
  [visibleLegend]="false"
  >
  <div dtSingleStackedBarOverlay>...</div>
</dt-single-stacked-bar>

输入

• series: DtSingleStackedBarChartNode[]要显示的信息节点
• selected: DtSingleStackedBarChartNode节点被选中
• selectable: boolean允许在图表上进行选择。 默认值：假
• valueDisplayMode: DtSingleStackedBarChartValueDisplayMode值的显示格式。 默认值： none
• visibleLegend: boolean是否应该显示图例。 默认值：真

输出

• selectedChange: 事件发射器已选择DtSingleStackedBarChartNode

内容投影

• dtSingleStackedBarOverlay

楷模

interface DtSingleStackedBarChartNode {
  label: string;
  value: number;
  color?: DtColors | string;
}

• label要在图表中显示的标签
• value要在图表中表示的绝对或相对数字
• 颜色可选。 如果颜色应该覆盖分配的颜色，请在此处设置

export type DtSingleStackedBarChartValueDisplayMode =
  | 'none'
  | 'absolute'
  | 'percent';

颜色

• 如果 3 或更少，则应遵循主题
• 如果超过 3 个，则应遵循通用图表调色板
• 如果用户指定颜色，则覆盖颜色
• 选择的颜色应该是青绿色

传奇

• 应该显示一个共同的项目符号
• 应该显示标签和值
• 点击它应该隐藏切片
• 最后一个可见节点不能隐藏

也许，如果我们考虑连接多个单堆叠条形图，类似max的输入会有所帮助。 如果没有给出，您可以将最大值计算为遍数系列的总和，但如果您有多个，您可能希望它们具有相同的比例以进行比较。

这个和外部的传说可能不是我们需要立即解决的问题，因为我认为这可以作为一个选项在之后进行扩展，而无需进行重大更改。

在提出建议并考虑到这个组件可以在多个系列中重复使用后，我决定升级它，不再称它为single 。 单身只是一个例子。

<dt-stacked-bar
  [series]="series"
  [selectable]="selectable"
  [(selected)]="selected"
  [valueDisplayMode]="valueDisplayMode"
  [direction]="direction"
  [labelPosition]="labelPosition"
  [legendPosition]="legendPosition"
  [legends]="legends"
  [fillMode]="fillMode"
  [maxBarSize]="maxBarSize"
  [max]="max"
  >
  <ng-template dtStackedBarChartOverlay let-tooltip>
    <strong>{{ tooltip.seriesOrigin.label }}</strong>
    <div>{{ tooltip.origin.label }}: {{ tooltip.origin.value }}</div>
  </ng-template>
</dt-stacked-bar>

输入

• series: DtStackedBarChartSeries[]要显示的系列信息
• selectable: boolean允许在图表上进行选择。 默认值：假
• selected: [DtStackedBarChartSeries, DtStackedBarChartNode]要选择的系列和节点。
• valueDisplayMode: DtStackedBarChartValueDisplayMode仅提供一个系列时的值显示格式。 默认值： none
• direction: DtStackedBarChartDirection图表中柱的方向。 默认值：水平
• labelPosition: DtStackedBarChartElementPosition标签与柱相关的位置。 默认值： top
• legendPosition: DtStackedBarChartElementPosition应在何处以及是否应显示图例。 默认值： bottom
• legends: DtStackedBarChartLegend[]可用于切换条形节点的图例数组。 当使用的图例在此组件之外时很有用
• fillMode: DtStackedBarChartFillMode每个柱是否应该完全填充或者应该考虑到它们的兄弟和最大值
• maxBarSize: number条的最大尺寸。 默认值：16
• max: number图表中的最大值

输出

• selectedChange: EventEmitter<[DtStackedBarChartSeries, DtStackedBarChartNode]>选择DtStackedBarChartSeries和DtStackedBarChartNode

内容投影

• dtStackedBarOverlay

楷模

interface DtStackedBarChartSeries {
  label: string;
  nodes: DtStackedBarChartNode[];
}

• label要在图表中显示的标签
• 节点要在图表中显示的每个段

interface DtStackedBarChartNode {
  label: string;
  value: number;
  color?: DtColors | string;
}

• label要在图表中显示的标签
• value要在图表中表示的绝对或相对数字
• 颜色可选。 如果颜色应该覆盖分配的颜色，请在此处设置

interface DtStackedBarChartTooltipData {
  origin: DtStackedBarChartNode;
  seriesOrigin: DtStackedBarChartSeries;

  valueRelative: number;
  color: DtColors | string;
  visible: boolean;
  selected: boolean;
  length?: string;
}

• 用户在series数组中传递的源节点
• seriesOrigin原始父系列
• valueRelative基于此节点的数值百分比值与顶层总和
• color此状态下此节点的颜色
• 可见如果节点可见
• selected如果当前选择了节点
• 图例仅给定可见节点的当前长度百分比

type DtStackedBarChartValueDisplayMode = 'none' | 'absolute' | 'percent';
type DtStackedBarChartElementPosition =
  | 'none'
  | 'top'
  | 'right'
  | 'bottom'
  | 'left';
type DtStackedBarChartFillMode = 'full' | 'relative';
type DtStackedBarChartDirection = 'horizontal' | 'vertical';

颜色

• 如果 3 或更少，则应遵循主题
• 如果超过 3 个，则应遵循通用图表调色板
• 如果用户指定颜色，则覆盖颜色
• 所选部分应显示绿松石色光晕

传奇

• 应该显示一个共同的项目符号
• 应该显示标签和值（如果只有一个系列）
• 点击它应该隐藏与该标签对应的节点
• 最后一个可见节点不能隐藏
• 可以是外部的，应该允许切换元素

嗨@subarroca！
这是扩展条形图的巨大努力。 有几点需要考虑：

条形水平/垂直与条形图和柱形图
在图表中，垂直条形图通常被称为柱形图。 我不确定我们是否想偏离这个标准。 我会选择创建两个组件dt-stacked-column-chart和dt-stacked-bar-chart ，它们可以通过基类共享大部分内部逻辑，即DtStackedBarColumnChartBase 。

选择器
请在选择器中包含“图表”一词，以明确组件将代表什么。

方向输入
如果我们将它们分成两个组件，则可能不再需要。

labelPosition: DtStackedBarChartElementPosition
也许我们可以找到一种既适合又适合柱形图和条形图的类型。 由于左/右在柱形图和顶部/底部与条形图上没有多大意义，也许我们可以使用类似start | end的东西？

legendPosition: DtStackedBarChartElementPosition
我会选择在当前级别删除它并为图例提供固定位置。 我目前看不到任何好处或用例来定义职位。 截至目前，我们所有的条形图/柱形图图例都在图表下方。

maxBarSize: 数字
我猜这是指单个列/条的最大宽度。也许我们可以找到一种方法在列和条之间用另一个名称共享它，即maxTrackSize 。

未来需要考虑的事情

API 提案不包括任何关于轴、轴标签、刻度和大小的内容。 我想我们可以在稍后的额外步骤中做到这一点。

注意事项

由于这似乎是一个非常大的组件，我想将其拆分并定义一个最小可行产品以开始使用是可行的。 否则，我认为这需要相当长的时间。 你对这个@ffriedl89 @subarroca有什么看法？

你好！

首先，我建议的所有内容都已经完成，因此除了测试之外不需要太多时间

选择器
它的名称中已经有“图表”，但我在这里忘记了，感谢您的注意

关于条形图/柱形图
事实上，它已经在一个带有一个模板的组件中完成，并使用了网格布局和元素定位，所以我不会采用单独的组件方法。 我可以将direction命名更改为type: 'bar' | 'column'

标签位置
当向 UX 展示一些试验时，他们建议标签可以放在条形图的左侧，所以我有顶部、底部和左侧，而右侧似乎只是完成了图片，尽管我不认为它会有多大用处。 我会和他们谈谈，看看我们是否可以摆脱左右

图例位置
易于拆卸

最大条形尺寸
这正是您所描述的，如果我们将命名更改为bar|column ，按照您的建议重命名它是有意义的

轴
我有一个用于柱形图的工作 x 轴线。 我认为我们应该以某种方式添加一个“valueAxis”，但我认为对于接下来的阶段来说，这已经远远超出了它的原始限制，并且可以轻松添加

由 #988 关闭