Skip to content

Fix powergraph headings and Axis #2646

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
benderl merged 2 commits into from
Aug 11, 2025
Merged

Fix powergraph headings and Axis #2646

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0e21ac2
Fix powergraph headings and Axis
cshagen Aug 9, 2025
d734768
add documentation
cshagen Aug 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion packages/modules/web_themes/colors/source/src/components/powerGraph/PgXAxis.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,13 @@ const drawAxis1 = computed(() => {
.attr('y', 12)
.attr('fill', 'var(--color-axis)')
.attr('font-size', fontsize)
.text(graphData.graphMode == 'year' ? 'MW' : 'kW')
.text(
graphData.graphMode == 'year'
? 'MWh'
: graphData.graphMode == 'month'
? 'kWh'
: 'kW',
)
.attr('text-anchor', 'start')
return 'PGXAxis.vue'
})
Expand Down
57 changes: 36 additions & 21 deletions packages/modules/web_themes/colors/source/src/components/powerGraph/PowerGraph.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,7 @@
</template>

<script setup lang="ts">
import { computed } from 'vue'
import WBWidget from '../shared/WBWidget.vue'
import PgSourceGraph from './PgSourceGraph.vue'
import PgUsageGraph from './PgUsageGraph.vue'
Expand Down Expand Up @@ -154,7 +155,21 @@ import PgToolTips from './PgToolTips.vue'

// state
const stackOrderMax = 2
const heading = 'Leistung / Ladestand '
const heading = computed(() => {
switch (graphData.graphMode) {
case 'year':
return 'Jahresübersicht'
case 'month':
return 'Monatsübersicht'
default:
return 'Leistung / Ladestand'
}
})
/**
* Changes the stack order for usage graph visualization
* Cycles through available stack orders (0 to stackOrderMax)
* Triggers usage graph reinitialization after change
*/
function changeStackOrder() {
let newOrder = globalConfig.usageStackOrder + 1
if (newOrder > stackOrderMax) {
Expand All @@ -163,6 +178,11 @@ function changeStackOrder() {
globalConfig.usageStackOrder = newOrder
setInitializeUsageGraph(true)
}

/**
* Configures zoom behavior for the power graph SVG
* @param svg - D3 Selection of the SVG element to apply zoom to
*/
function setZoom(svg: Selection<Element, unknown, HTMLElement, unknown>) {
const myextent: [[number, number], [number, number]] = [
[0, margin.top],
Expand All @@ -181,17 +201,30 @@ function setZoom(svg: Selection<Element, unknown, HTMLElement, unknown>) {
)
}

// callback that is called when the user tries to pan/zoom in the window
/**
* Handles zoom events on the graph
* Updates the transform value used for rendering
* @param event - D3 zoom event containing transform information
*/
function zoomed(event: D3ZoomEvent<SVGGElement, unknown>) {
mytransform.value = event.transform
}

// prevent scrolling then apply the default filter
/**
* Filters zoom/pan events to control graph interaction
* Prevents default scroll behavior and applies zoom constraints
* @param event - Browser pointer or wheel event
* @returns boolean indicating if the event should trigger zoom
*/
function filter(event: PointerEvent | WheelEvent) {
event.preventDefault()
return (!event.ctrlKey || event.type === 'wheel') && !event.button
}

/**
* Toggles the zoom state of the graph
* Sets the current widget as active and toggles zoom mode
*/
function zoomGraph() {
globalConfig.zoomedWidget = 1
globalConfig.zoomGraph = !globalConfig.zoomGraph
Expand All @@ -207,22 +240,4 @@ onMounted(() => {
.fa-magnifying-glass {
color: var(--color-menu);
}

.dateWbBadge {
background-color: var(--color-menu);
color: var(--color-bg);
font-size: var(--font-medium);
font-weight: normal;
}

.waitsign {
text-align: center;
font-size: var(--font-medium);
color: var(--color-fg);
border: 1px solid var(--color-bg);
padding: 2em;
margin: 2em;
margin-top: 4em;
background-color: var(--color-bg);
}
</style>
7 changes: 5 additions & 2 deletions packages/modules/web_themes/colors/source/src/components/powerMeter/PMArc.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,10 @@
:transform="'translate(' + path.centroid(consumer) + ')'"
>
<PMPopup
v-if="categoriesToShow.includes(consumer.data.type) && Math.abs(consumer.data.power) / summarizedPower > 0.05"
v-if="
categoriesToShow.includes(consumer.data.type) &&
Math.abs(consumer.data.power) / summarizedPower > 0.05
"
:consumer="consumer.data"
/>
</g>
Expand Down Expand Up @@ -83,7 +86,7 @@ function strokeColor(d: PieArcDatum<PowerItem>, i: number): string {
: 'null'
: d.data.color
}
const summarizedPower = computed (() => {
const summarizedPower = computed(() => {
return props.plotdata.reduce((sum, item) => sum + Math.abs(item.power), 0)
})
</script>
Expand Down