@subarroca私は過去にそのようなコンポーネントについて何人かの人々と話をしました-それで、これはライブラリへの良い追加になると思います。
実装を開始する前に、まずAPIプロポーザルを作成してください。

最初の考えと質問：

• 凡例はオプションである必要があります
• 凡例のバーアイコンがここでは正しくない可能性があります。
• ツールチップは他のチャートと同様に機能し、ng-templateで提供されるコンテキストを取得する必要があります。
• すべての要素を非表示にできるわけではないことを確認する必要があります。常に少なくとも1つの要素が存在する必要があります。
• 選択色は何ですか？ 他のグラフと同じように、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>

入力

• シリーズ：DtSingleStackedBarNode[]表示される情報のノード
• 選択済み：選択するDtSingleStackedBarNodeノード
• valueDisplayMode：DtChartValueMode値の表示形式。 デフォルトDtChartValueMode.ABSOLUTE
• visibleLegend：ブール値のWether凡例を表示するかどうか。 デフォルト：true

出力

• selectedChange：EventEmitter 選択しDtSingleStackedBarNode

コンテンツプロジェクション

• dtSingleStackedBarOverlay

モデル

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

• labelチャートに表示されるラベル
• 値チャートに表示される絶対数または相対数
• 色オプション。 割り当てられた色を上書きする必要がある場合は、ここで設定します

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

色

• 3以下の場合はテーマに従う必要があります
• 3つ以上の場合は、一般的なチャートパレットに従う必要があります
• ユーザーが1つを指定すると、色が上書きされます
• 選択した色はターコイズである必要があります

伝説

• 一般的な箇条書きを表示する必要があります
• ラベルと値を表示する必要があります

未定

• すべてのノードが無効になるとどうなりますか？

こんにちは@subarroca！
これまでのところ、APIの提案は良さそうです。 私が話したいことがいくつかあります。

入力

visibleLegend：boolean凡例を表示するかどうか。 デフォルト：true

SingleStackedBarChartをdt-legendに接続し、凡例がレンダリングされる場所をコンシューマーに定義させることを検討する必要があると思います。 テーブル行内のSingleStackedBarChartのユースケースについて考えています。ここでは、テーブル自体の最後に、グラフの凡例が表示されます。
ただし、これにより、 https： //github.com/dynatrace-oss/barista/issues/884#issuecomment -614602707で説明されているように、チャート間で必要な通信が行われ、チャートのシリーズと色が同期されます。 回避策は、シリーズがチャートの色に自動的に従わないようにすることですが、ユーザーがチャートの色を定義できるようにします。

モデル

値チャートに表示される絶対数または相対数

列挙型の代わりに、値として'percent' | 'absolute'の共用体型を使用してください。

こんにちは@tomheller！ 提案にいくつかの変更を加えて、より適切に適合させました。
私はDtSingleStackedBarChartValueDisplayModeを使用しています。

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

これはあなたのために働きますか、それともあなたはタイプを持たないことを好みますか？

また、 selectableを追加しました。これは、すべての場合に選択可能なグラフとして使用する必要があるわけではないためです。

色はgetDtChartColorPaletteで自動的にフェッチされますが、ノードに色がある場合は、割り当てられた色を上書きするだけです。

凡例の使用について。 それをテンプレートに入れました。 それを接続する必要がありますか、それとも何らかの方法で凡例を公開する必要がありますか？

これはあなたのために働きますか、それともあなたはタイプを持たないことを好みますか？

これは私にとって完璧に機能します、：+ 1：

また、すべての場合に選択可能なチャートとして使用したいわけではないため、選択可能なものを追加しました。

これは私にも有効です。コメントに変更を反映することもできます。最新の単一のソースがここにありますhttps://github.com/dynatrace-oss/barista/issues/884#issuecomment-614605963

凡例の使用について。 それをテンプレートに入れました。 それを接続する必要がありますか、それとも何らかの方法で凡例を公開する必要がありますか？

私が言いたかったのは、複数のグラフが1つの凡例を共有できるということです。 そのため、グラフ自体に凡例を埋め込むことはできないと思いますが、このようなことを行う必要があります。 行が意味的に接続されている、テーブルまたはその他の種類の繰り返しデータ表現を想像してみてください。

<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で、1つのシリーズが欠落している場合でも。

これが理解できるといいのですが？

はい、完全に理解できます。 凡例を操作して、グラフの要素を非表示または表示したいと思いました。

しばらくして定義を更新します

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

入力

• シリーズ：DtSingleStackedBarChartNode[]表示される情報のノード
• 選択済み：選択するDtSingleStackedBarChartNodeノード
• selectable：booleanチャートでの選択を許可します。 デフォルト：false
• valueDisplayMode：DtSingleStackedBarChartValueDisplayMode値の表示形式。 デフォルト： none
• visibleLegend：ブール値のWether凡例を表示するかどうか。 デフォルト：true

出力

• selectedChange：EventEmitter 選択しDtSingleStackedBarChartNode

コンテンツプロジェクション

• dtSingleStackedBarOverlay

モデル

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

• labelチャートに表示されるラベル
• 値チャートに表示される絶対数または相対数
• 色オプション。 割り当てられた色を上書きする必要がある場合は、ここで設定します

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

色

• 3以下の場合はテーマに従う必要があります
• 3つ以上の場合は、一般的なチャートパレットに従う必要があります
• ユーザーが1つを指定すると、色が上書きされます
• 選択した色はターコイズである必要があります

伝説

• 一般的な箇条書きを表示する必要があります
• ラベルと値を表示する必要があります
• クリックするとスライスが非表示になります
• 最後に表示されたノードを非表示にすることはできません

たぶん、単一の積み上げ棒グラフの複数のものを接続することを考える場合、 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チャートでの選択を許可します。 デフォルト：false
• 選択済み：[DtStackedBarChartSeries、DtStackedBarChartNode]選択するシリーズとノード。
• valueDisplayMode：DtStackedBarChartValueDisplayMode1つのシリーズのみが提供された場合の値の表示形式。 デフォルト： none
• 方向：DtStackedBarChartDirectionチャート内のバーの方向。 デフォルト：水平
• labelPosition：DtStackedBarChartElementPositionバーに関連するラベルの位置。 デフォルト： top
• legendPosition：DtStackedBarChartElementPosition凡例を表示する場所と場合。 デフォルト： bottom
• legends：DtStackedBarChartLegend[]バーノードを切り替えるために使用できる凡例の配列。 使用される凡例がこのコンポーネントの外にある場合に便利です
• fillMode：DtStackedBarChartFillMode各バーを完全に埋める必要があるか、兄弟と最大値を考慮に入れる必要があるか
• maxBarSize：numberバーの最大サイズ。 デフォルト：16
• max：数値チャートの最大値

出力

• selectedChange：EventEmitter <[DtStackedBarChartSeries、DtStackedBarChartNode]>選択されDtStackedBarChartSeriesおよびDtStackedBarChartNode

コンテンツプロジェクション

• dtStackedBarOverlay

モデル

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

• labelチャートに表示されるラベル
• ノードチャートに表示されるすべてのセグメント

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

• labelチャートに表示されるラベル
• 値チャートに表示される絶対数または相対数
• 色オプション。 割り当てられた色を上書きする必要がある場合は、ここで設定します

interface DtStackedBarChartTooltipData {
  origin: DtStackedBarChartNode;
  seriesOrigin: DtStackedBarChartSeries;

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

• series配列でユーザーから渡されたoriginノード
• seriesOriginオリジナルの親シリーズ
• valueRelativeこのノードに基づく数値のパーセンテージ値とトップレベルの合計
• colorこの状態のこのノードの色
• 表示ノードが表示されている場合
• 選択済みノードが現在選択されている場合
• 凡例表示されているノードのみを指定した場合の現在の長さ（パーセンテージ）

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

色

• 3以下の場合はテーマに従う必要があります
• 3つ以上の場合は、一般的なチャートパレットに従う必要があります
• ユーザーが1つを指定すると、色が上書きされます
• 選択したセグメントはターコイズのハローを表示する必要があります

伝説

• 一般的な箇条書きを表示する必要があります
• ラベルと値を表示する必要があります（1つのシリーズのみの場合）
• クリックすると、そのラベルに対応するノードが非表示になります
• 最後に表示されたノードを非表示にすることはできません
• 外部である可能性があり、要素を切り替えることができるはずです

こんにちは@subarroca！
これは、棒グラフを拡張するための多大な努力です。 考慮すべき点がいくつかあります。

横棒/縦棒vs棒グラフと縦棒グラフ
グラフ作成では、垂直棒グラフは通常、縦棒グラフと呼ばれます。 この基準から逸脱したいかどうかはわかりません。 私は2つのコンポーネントdt-stacked-column-chartとdt-stacked-bar-chartを作成することを選択します。これらは、基本クラス、つまりDtStackedBarColumnChartBaseを介して内部ロジックのほとんどを共有できます。

セレクタ
コンポーネントが何を表すかを明確にするために、セレクター内に「チャート」という単語を含めてください。

方向入力
それらを2つのコンポーネントに分割すれば、おそらくもう必要ないでしょう。

labelPosition：DtStackedBarChartElementPosition
おそらく、両方に適合し、縦棒グラフと棒グラフに等しく適用できるタイプを見つけることができます。 左/右は縦棒グラフではあまり意味がなく、上/下は棒グラフではあまり意味がないので、 start | endのようなもので行くことができますか？

legendPosition：DtStackedBarChartElementPosition
私はこれを現在のレベルで削除し、凡例の固定位置を提供することを選択します。 現時点では、ポジションを定義するためのメリットやユースケースは見当たりません。 現在のところ、棒グラフ/縦棒グラフのすべての凡例はグラフの下にあります。

maxBarSize：数値
これは単一の列/バーのmaxWidthを指していると思います。おそらく、これを別の名前、つまりmaxTrackSizeで列とバーの間で共有する方法を見つけることができます。

今後の検討事項

API提案には、軸、軸ラベル、目盛り、サイズに関する情報は含まれていません。 後で追加のステップでそれを行うことができると思います。

考慮事項

これは非常に大きなコンポーネントのように思われるので、これを分割して、開始するための最小限の実行可能な製品を定義することは実行可能だと思います。 そうでなければ、私はこれがかなり長い時間がかかるのを見ます。 この@ffriedl89@subarrocaについてどう思いますか？

やあ！

まず第一に、私が提案したことはすべてすでに行われているので、テストを除いてこれを行うのにそれほど時間はかかりません

セレクタ
名前にはすでに「チャート」が含まれていますが、ここで忘れてしまいました。

棒グラフ/縦棒グラフについて
実際のところ、これは1つのテンプレートで1つのコンポーネントですでに行われており、グリッドレイアウトと要素の配置を使用しているため、個別のコンポーネントのアプローチは使用しません。 directionの名前をtype: 'bar' | 'column'に変更できます

ラベルの位置
UXの試用版をいくつか示したとき、棒グラフの左側にラベルを付けることができると提案されたので、上、下、左、右だけで画像が完成したように見えましたが、あまり役に立ちません。 右と左を取り除くことができるかどうかを確認するために彼らと話をします

凡例の位置
簡単に取り外し可能

maxBarSize
名前をbar|columnに変更すると、提案どおりに名前を変更するのが理にかなっています。

軸
縦棒グラフのx軸線が機能しています。 どういうわけか「valueAxis」を追加する必要があると思いましたが、次のフェーズでは、これが元の制限をはるかに超えて成長し、簡単に追加できるようになると考えていました。

＃988で閉鎖