@subarroca 과거에 이러한 구성 요소에 대해 몇 사람과 이야기한 적이 있습니다. 따라서 이것이 라이브러리에 좋은 추가 기능이 될 것이라고 생각합니다.
구현을 시작하기 전에 먼저 API 제안을 작성하십시오.

초기 생각 및 질문:

• 범례는 선택 사항이어야 합니다.
• 범례의 막대 아이콘이 여기에 올바르지 않을 수 있습니다.
• 툴팁은 다른 차트와 유사하게 작동해야 하며 ng-템플릿에서 제공되는 컨텍스트를 가져와야 합니다.
• 모든 요소를 ​​숨길 수 없는지 확인해야 합니다. 항상 최소한 하나의 요소가 있어야 합니다.
• 선택 색상은 무엇입니까? 다른 차트와 마찬가지로 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: 부울 날씨 범례를 표시할지 여부. 기본값: 참

출력

• selectedChange: EventEmitter DtSingleStackedBarNode 선택됨

콘텐츠 프로젝션

• dtSingleStackedBarOverlay

모델

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

• 레이블 차트에 표시할 레이블
• 값 차트에 표시되는 절대 또는 상대 숫자
• 색상 선택 사항. 색상이 할당된 색상보다 우선 적용되어야 하는 경우 여기에서 설정하십시오.

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

그림 물감

• 3 이하인 경우 테마를 따라야 함
• 3개 이상인 경우 일반 차트 팔레트를 따라야 함
• 사용자가 하나를 표시하면 색상이 무시됩니다.
• 선택한 색상은 청록색이어야 합니다.

전설

• 공통 글머리 기호를 표시해야 합니다.
• 레이블과 값을 표시해야 합니다.

미정

• 모든 노드가 비활성화되면 어떻게 됩니까?

안녕하세요 @subarroca입니다!
API 제안은 지금까지 좋아 보입니다. 내가 논의하고 싶은 몇 가지.

입력

visibleLegend: 부울 범례를 표시할지 여부입니다. 기본값: 참

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

범례의 사용에 대해. 템플릿에 넣었습니다. 연결해야 하거나 범례를 어떻게든 노출해야 합니까?

내가 말하려고 했던 요점은 여러 차트가 하나의 범례를 공유할 수 있다는 것입니다. 그렇기 때문에 차트 자체에 범례를 포함할 수는 없지만 이와 같이 해야 한다고 생각합니다. 행이 의미적으로 연결된 테이블이나 다른 종류의 반복 데이터 표현을 상상해 보십시오.

<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>

입력

• 시리즈: DtSingleStackedBarChartNode[] 표시할 정보의 노드
• 선택됨: DtSingleStackedBarChartNode 선택 될 노드
• 선택 가능: 부울 차트에서 선택을 허용합니다. 기본값: 거짓
• valueDisplayMode: DtSingleStackedBarChartValueDisplayMode 값 표시 형식입니다. 기본값: none
• visibleLegend: 부울 날씨 범례를 표시할지 여부. 기본값: 참

출력

• selectedChange: EventEmitter DtSingleStackedBarChartNode 선택됨

콘텐츠 프로젝션

• dtSingleStackedBarOverlay

모델

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

• 레이블 차트에 표시할 레이블
• 값 차트에 표시되는 절대 또는 상대 숫자
• 색상 선택 사항. 색상이 할당된 색상보다 우선 적용되어야 하는 경우 여기에서 설정하십시오.

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>

입력

• 시리즈: DtStackedBarChartSeries[] 표시할 정보 시리즈
• 선택 가능: 부울 차트에서 선택을 허용합니다. 기본값: 거짓
• 선택됨: [DtStackedBarChartSeries, DtStackedBarChartNode] 시리즈 및 선택할 노드입니다.
• valueDisplayMode: DtStackedBarChartValueDisplayMode 하나의 계열만 제공된 경우 값의 표시 형식입니다. 기본값: none
• 방향: DtStackedBarChartDirection 차트의 막대 방향입니다. 기본값: 수평
• labelPosition: DtStackedBarChartElementPosition 막대와 관련된 레이블의 위치입니다. 기본값: top
• legendPosition: DtStackedBarChartElementPosition 범례를 표시해야 하는 위치 및 여부입니다. 기본값: bottom
• 범례: DtStackedBarChartLegend[] 막대 노드를 전환하는 데 사용할 수 있는 범례의 배열입니다. 사용된 범례가 이 구성요소 외부에 있을 때 유용합니다.
• fillMode: DtStackedBarChartFillMode 각 막대가 완전히 채워져야 하는지 아니면 형제와 최대값을 고려해야 하는지 여부
• maxBarSize: 숫자 막대의 최대 크기입니다. 기본값: 16
• max: 숫자 차트의 최대 값

출력

• selectedChange: EventEmitter<[DtStackedBarChartSeries, DtStackedBarChartNode]> DtStackedBarChartSeries 및 DtStackedBarChartNode 선택됨

콘텐츠 프로젝션

• dtStackedBarOverlay

모델

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

• 레이블 차트에 표시할 레이블
• 노드 차트에 표시할 모든 세그먼트

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

• 레이블 차트에 표시할 레이블
• 값 차트에 표시되는 절대 또는 상대 숫자
• 색상 선택 사항. 색상이 할당된 색상보다 우선 적용되어야 하는 경우 여기에서 설정하십시오.

interface DtStackedBarChartTooltipData {
  origin: DtStackedBarChartNode;
  seriesOrigin: DtStackedBarChartSeries;

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

• series 배열에서 사용자가 전달한 원본 노드
• 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개 이상인 경우 일반 차트 팔레트를 따라야 함
• 사용자가 하나를 표시하면 색상이 무시됩니다.
• 선택한 세그먼트에는 청록색 후광이 표시되어야 합니다.

전설

• 공통 글머리 기호를 표시해야 합니다.
• 레이블과 값을 표시해야 함(하나의 시리즈만 있는 경우)
• 클릭 시 해당 레이블에 해당하는 노드를 숨겨야 합니다.
• 마지막으로 보이는 노드는 숨길 수 없습니다
• 외부에 있을 수 있으며 요소를 토글할 수 있어야 합니다.

안녕하세요 @subarroca입니다!
이것은 막대 차트를 확장하기 위한 큰 노력입니다. 고려해야 할 몇 가지 사항:

가로 막대형/세로 막대형 차트 및 세로 막대형 차트
차트에서 세로 막대 차트는 일반적으로 세로 막대형 차트라고 합니다. 이 표준에서 벗어나고 싶은지 잘 모르겠습니다. dt-stacked-column-chart 및 dt-stacked-bar-chart 두 구성 요소를 만들기로 선택하고 기본 클래스(예: DtStackedBarColumnChartBase )를 통해 대부분의 내부 논리를 공유할 수 있습니다.

선택자
구성 요소가 무엇을 나타낼 것인지 명확하게 하기 위해 선택기 내에 "차트"라는 단어를 포함하십시오.

방향 입력
두 구성 요소로 나누면 더 이상 필요하지 않을 것입니다.

레이블 위치: DtStackedBarChartElementPosition
두 가지 모두에 적합하고 세로 막대형 및 막대형 차트에 동일하게 적용할 수 있는 유형을 찾을 수 있습니다. 왼쪽/오른쪽은 세로 막대형 차트에서 의미가 없고 위쪽/아래쪽 막대 차트에서는 의미가 없으므로 start | end 와 같이 사용할 수 있습니다.

범례 위치: DtStackedBarChartElementPosition
현재 수준에서 이것을 제거하고 범례에 대한 고정 위치를 제공하기로 선택합니다. 현재로서는 직위를 정의할 수 있는 이점이나 사용 사례가 없습니다. 현재로서는 막대/열 차트에 대한 모든 범례가 차트 아래에 있습니다.

maxBarSize: 숫자
나는 이것이 단일 컬럼/바의 maxWidth를 참조한다고 추측합니다. 아마도 maxTrackSize 와 같은 다른 이름으로 컬럼과 바 간에 이것을 공유하는 방법을 찾을 수 있을 것입니다.

앞으로 고려해야 할 사항

API 제안에는 축, 축 레이블, 눈금 및 크기에 대한 내용이 포함되어 있지 않습니다. 나중에 추가 단계에서 그렇게 할 수 있다고 생각합니다.

고려 사항

이것은 매우 큰 구성 요소처럼 보이기 때문에 이것을 분할하고 시작하기 위해 최소 실행 가능한 제품을 정의하는 것이 가능하다고 생각합니다. 그렇지 않으면 꽤 오랜 시간이 걸립니다. @ffriedl89 @subarroca 에 대해 어떻게 생각하세요?

안녕!

우선 제가 제안한 모든 것은 이미 완료되었으므로 테스트를 제외하고는 이 작업을 수행하는 데 많은 시간이 소요되지 않습니다.

선택자
이미 이름에 '차트'가 있지만 여기에서 잊어 버렸습니다. 그래도 알아 주셔서 감사합니다.

막대 / 세로 막대형 차트 정보
사실 하나의 단일 템플릿과 그리드 레이아웃 및 요소 위치 지정을 사용하여 하나의 구성 요소에서 이미 수행되었으므로 별도의 구성 요소 접근 방식을 사용하지 않습니다. direction 이름을 type: 'bar' | 'column' 로 변경할 수 있습니다.

라벨 위치
UX에 몇 가지 시도를 보여줄 때 레이블이 막대 차트의 왼쪽에 갈 수 있다고 제안 했으므로 위, 아래 및 왼쪽이 있었고 오른쪽은 그림을 완성하는 것처럼 보였지만 그다지 유용하지는 않을 것입니다. 나는 우리가 좌우를 없앨 수 있는지 알아보기 위해 그들과 이야기할 것이다.

레전드 포지션
쉽게 제거 가능

최대 막대 크기
그것은 당신이 설명한 것과 정확히 같습니다. 이름을 bar|column 로 변경하면 제안한 대로 이름을 바꾸는 것이 좋습니다.

중심선
세로 막대형 차트에 사용할 x축 선이 있습니다. 어떻게든 'valueAxis'를 추가해야 한다고 생각했지만 다음 단계에서는 이것이 원래의 한계를 훨씬 넘어섰고 쉽게 추가할 수 있는 개선 사항이 될 것이라고 생각했습니다.

#988에 의해 폐쇄