Height of plot is 0 until resize after changing layout input
維護者通常 1 天內回覆
還沒有人認領這個 Issue。
評估
- 難度
- 3/5
- 預估耗時
- 1-2 天
- 新手友好度
- 38/100
- Issue 類型
- 缺陷
- 描述清晰度
- 基本清楚
- 活躍度
- 停滯
- 技術堆疊
- angular, typescript
- 領域
- frontend
研究方向
從 Angular 範本的 元件以及由主題訊號更新的 layout input 開始。重現主題切換，然後在不調整視窗大小的情況下，比較更新前後的圖表容器高度。完成標準是：responsive 圖表在 layout 變更後立即維持其實際容器高度。
由索引模型根據 Issue 內容生成。
描述
Hello,
I'm having a bit of trouble with my charts in a dashboard. I've implemented theme switching in my application using system variables and Angular Material. I'm able to change my chart's look and feel according to the colors of my theme. However, the container will collapse when I switch to a new theme because the plotly-plot element has a height of 0 until I resize the window.
Injectable
import { DOCUMENT } from '@angular/common';
import {
computed,
effect,
inject,
InjectionToken,
signal,
} from '@angular/core';
import { WA_WINDOW } from '@ng-web-apis/common';
export const THEME = new InjectionToken('Theme', {
factory: () => {
const w = inject(WA_WINDOW);
const d = inject(DOCUMENT);
const darkMode = signal(true);
const setDarkMode = effect(() =>
d.documentElement.classList.toggle('light', !darkMode())
);
return {
darkMode,
textColor: computed(() => {
darkMode();
return getComputedStyle(d.documentElement).getPropertyValue(
'--mat-app-text-color'
);
}),
};
},
});
Component
...
readonly #theme = inject(THEME);
readonly ageGenderChartLayout = computed<Partial<Plotly.Layout>>(() => ({
barmode: 'stack',
autosize: true,
margin: {
l: 60,
r: 50,
b: 100,
t: 50,
pad: 4,
},
title: 'People by Age',
paper_bgcolor: 'rgba(255,255,255,0)',
plot_bgcolor: 'rgba(255,255,255,0)',
font: {
color: this.#theme.textColor(),
},
}));
...
Template
<mat-card>
<mat-card-content>
@if (mapData$ | async; as mapData) {
<plotly-plot [data]="mapData"
[layout]="mapLayout()"
[config]="{responsive: true, mapboxAccessToken: mapboxToken, displaylogo: false, modeBarButtonsToRemove: ['toImage']}" />
} @else {
<mat-spinner style="margin: auto;"></mat-spinner>
}
</mat-card-content>
</mat-card>
Before switching themes:
After switching themes (which updates the layout input of the plotly-plot component):
How can I have responsive charts while still have their containers "see" their actual height? is this a Plotly chart issue?
- 主要語言
- TypeScript
- 星號
- 242
- 分支
- 81
- 平均合併
- 23 小時 52 分鐘
- 30 天內合併 PR
- 5
環境準備
這個專案沒有提供開發容器、Dockerfile 或貢獻指南，環境需要你自己搭建：先看它的 README，通用步驟見我們的新手貢獻指南。
從這裡開始
- 先讀完整個 Issue，再讀專案的貢獻指南。
- 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
- Fork 儲存庫，在一個分支上完成修改。
- 送出 Pull Request，並在描述裡引用這個 Issue 編號。
plotly/angular-plotly.js 的其他 Issue
-
難度 2/5 1-3 小時 新手友好度 76/100
plotly/angular-plotly.js#373 ·
維護者通常 1 天內回覆
-
Feature request: please add migration guide可能已有人在做 @andrefarzat 於 21 天前認領。 未關閉
難度 3/5 1-2 天 新手友好度 45/100
plotly/angular-plotly.js#285 · 3 則留言 ·
維護者通常 1 天內回覆
-
event handlers are not typed可能已有人在做 @andrefarzat 於 21 天前認領。 未關閉
難度 3/5 1-2 天 新手友好度 38/100
plotly/angular-plotly.js#283 ·
維護者通常 1 天內回覆
-
Angular 20 standalone application可能已有人在做 @andrefarzat 於 21 天前認領。 未關閉
難度 3/5 1-2 天 新手友好度 35/100
plotly/angular-plotly.js#281 · 8 則留言 · 2 個 reaction ·
維護者通常 1 天內回覆
-
難度 3/5 1-2 天 新手友好度 25/100
plotly/angular-plotly.js#278 · 2 則留言 · 1 個 reaction ·
維護者通常 1 天內回覆
查看 plotly/angular-plotly.js 的全部 Issue
相似的 Issue
-
難度 1/5 1 小時以內 新手友好度 88/100
-
bug needs triage
難度 2/5 1-3 小時 新手友好度 72/100
DSpace/dspace-angular#6511 ·
維護者通常 1 天內回覆
-
area: frontend area:byok bug severity:low
難度 2/5 1-3 小時 新手友好度 65/100
維護者通常 1 天內回覆
-
Phone app shows Unknown for a remote machine whose key changed可能已有人在做 @janicduplessis 今天認領。 未關閉area: mobile priority: P3 type: bug
難度 1/5 1 小時以內 新手友好度 78/100
appandflow/stim#5006 · 1 則留言 ·
維護者通常 1 天內回覆
-
Area - Local to Cloud Bug
難度 2/5 1-3 小時 新手友好度 66/100
microsoft/vscode-mssql#23209 ·
維護者通常 1 天內回覆