File: C:/Users/fred/anaconda3/Lib/site-packages/panel/models/trend.ts
import {HTMLBox, HTMLBoxView} from "./layout"
import {build_view} from "@bokehjs/core/build_views"
import {Plot} from "@bokehjs/models/plots"
import {Line, Step, VArea, VBar} from "@bokehjs/models/glyphs"
import type * as p from "@bokehjs/core/properties"
import {div} from "@bokehjs/core/dom"
import {ColumnDataSource} from "@bokehjs/models/sources/column_data_source"
import {BasicTickFormatter, NumeralTickFormatter, TickFormatter} from "@bokehjs/models/formatters"
const red: string = "#d9534f"
const green: string = "#5cb85c"
const blue: string = "#428bca"
export class TrendIndicatorView extends HTMLBoxView {
declare model: TrendIndicator
containerDiv: HTMLDivElement
textDiv: HTMLDivElement
titleDiv: HTMLDivElement
valueDiv: HTMLDivElement
value2Div: HTMLDivElement
changeDiv: HTMLElement
plotDiv: HTMLDivElement
plot: Plot
_value_format: string
_value_change_format: string
override initialize(): void {
super.initialize()
this.containerDiv = div({style: {height: "100%", width: "100%"}})
this.titleDiv = div({style: {font_size: "1em", word_wrap: "break-word"}})
this.valueDiv = div({style: {font_size: "2em"}})
this.value2Div = div({style: {font_size: "1em", opacity: "0.5", display: "inline"}})
this.changeDiv = div({style: {font_size: "1em", opacity: "0.5", display: "inline"}})
this.textDiv = div({}, this.titleDiv, this.valueDiv, div({}, this.changeDiv, this.value2Div))
this.updateTitle()
this.updateValue()
this.updateValue2()
this.updateValueChange()
this.updateTextFontSize()
this.plotDiv = div({})
this.containerDiv = div({style: {height: "100%", width: "100%"}}, this.textDiv, this.plotDiv)
this.updateLayout()
}
override connect_signals(): void {
super.connect_signals()
const {
pos_color, neg_color, plot_color, plot_type, width,
height, sizing_mode, title, value, value_change, layout,
} = this.model.properties
this.on_change([pos_color, neg_color], () => this.updateValueChange())
this.on_change([plot_color, plot_type, width, height, sizing_mode], () => this.render())
this.on_change(title, () => this.updateTitle(true))
this.on_change(value, () => this.updateValue(true))
this.on_change(value_change, () => this.updateValue2(true))
this.on_change(layout, () => this.updateLayout())
}
override async render(): Promise<void> {
super.render()
this.shadow_el.appendChild(this.containerDiv)
await this.setPlot()
}
private async setPlot() {
this.plot = new Plot({
background_fill_color: null,
border_fill_color: null,
outline_line_color: null,
min_border: 0,
sizing_mode: "stretch_both",
toolbar_location: null,
})
const source = this.model.source
if (this.model.plot_type === "line") {
const line = new Line({
x: {field: this.model.plot_x},
y: {field: this.model.plot_y},
line_width: 4,
line_color: this.model.plot_color,
})
this.plot.add_glyph(line, source)
} else if (this.model.plot_type === "step") {
const step = new Step({
x: {field: this.model.plot_x},
y: {field: this.model.plot_y},
line_width: 3,
line_color: this.model.plot_color,
})
this.plot.add_glyph(step, source)
} else if (this.model.plot_type === "area") {
const varea = new VArea({
x: {field: this.model.plot_x},
y1: {field: this.model.plot_y},
y2: 0,
fill_color: this.model.plot_color,
fill_alpha: 0.5,
})
this.plot.add_glyph(varea, source)
const line = new Line({
x: {field: this.model.plot_x},
y: {field: this.model.plot_y},
line_width: 3,
line_color: this.model.plot_color,
})
this.plot.add_glyph(line, source)
} else {
const vbar = new VBar({
x: {field: this.model.plot_x},
top: {field: this.model.plot_y},
width: 0.9,
line_color: null,
fill_color: this.model.plot_color,
})
this.plot.add_glyph(vbar, source)
}
const view = await build_view(this.plot)
this.plotDiv.innerHTML = ""
view.render_to(this.plotDiv)
}
override after_layout(): void {
super.after_layout()
this.updateTextFontSize()
}
updateTextFontSize(): void {
this.updateTextFontSizeColumn()
}
updateTextFontSizeColumn(): void {
let elWidth = this.containerDiv.clientWidth
let elHeight = this.containerDiv.clientHeight
if (this.model.layout === "column") {
elHeight = Math.round(elHeight/2)
} else {
elWidth = Math.round(elWidth/2)
}
const widthTitle = this.model.title.length
const widthValue = 2*this._value_format.length
const widthValue2 = this._value_change_format.length+1
const widthConstraint1 = elWidth/widthTitle*2.0
const widthConstraint2 = elWidth/widthValue*1.8
const widthConstraint3 = elWidth/widthValue2*2.0
const heightConstraint = elHeight/6
const fontSize = Math.min(widthConstraint1, widthConstraint2, widthConstraint3, heightConstraint)
this.textDiv.style.fontSize = `${Math.trunc(fontSize) }px`
this.textDiv.style.lineHeight = "1.3"
}
updateTitle(update_fontsize: boolean = false): void {
this.titleDiv.innerText = this.model.title
if (update_fontsize) {
this.updateTextFontSize()
}
}
updateValue(update_fontsize: boolean = false): void {
this._value_format = this.model.formatter.doFormat([this.model.value], {loc: 0})[0]
this.valueDiv.innerText = this._value_format
if (update_fontsize) {
this.updateTextFontSize()
}
}
updateValue2(update_fontsize: boolean = false): void {
this._value_change_format = this.model.change_formatter.doFormat([this.model.value_change], {loc: 0})[0]
this.value2Div.innerText = this._value_change_format
this.updateValueChange()
if (update_fontsize) {
this.updateTextFontSize()
}
}
updateValueChange(): void {
if (this.model.value_change > 0) {
this.changeDiv.innerHTML = "▲"
this.changeDiv.style.color = this.model.pos_color
} else if (this.model.value_change < 0) {
this.changeDiv.innerHTML = "▼"
this.changeDiv.style.color = this.model.neg_color
} else {
this.changeDiv.innerHTML = " "
this.changeDiv.style.color = "inherit"
}
}
updateLayout(): void {
if (this.model.layout === "column") {
this.containerDiv.style.display = "block"
this.textDiv.style.height = "50%"
this.textDiv.style.width = "100%"
this.plotDiv.style.height = "50%"
this.plotDiv.style.width = "100%"
} else {
this.containerDiv.style.display = "flex"
this.textDiv.style.height = "100%"
this.textDiv.style.width = ""
this.plotDiv.style.height = "100%"
this.plotDiv.style.width = ""
this.textDiv.style.flex = "1"
this.plotDiv.style.flex = "1"
}
if (this._has_finished) {
this.invalidate_layout()
}
}
}
export namespace TrendIndicator {
export type Attrs = p.AttrsOf<Props>
export type Props = HTMLBox.Props & {
change_formatter: p.Property<TickFormatter>
description: p.Property<string>
formatter: p.Property<TickFormatter>
layout: p.Property<string>
source: p.Property<any>
plot_x: p.Property<string>
plot_y: p.Property<string>
plot_color: p.Property<string>
plot_type: p.Property<string>
pos_color: p.Property<string>
neg_color: p.Property<string>
title: p.Property<string>
value: p.Property<number>
value_change: p.Property<number>
}
}
export interface TrendIndicator extends TrendIndicator.Attrs { }
export class TrendIndicator extends HTMLBox {
declare properties: TrendIndicator.Props
constructor(attrs?: Partial<TrendIndicator.Attrs>) {
super(attrs)
}
static override __module__ = "panel.models.trend"
static {
this.prototype.default_view = TrendIndicatorView
this.define<TrendIndicator.Props>(({Float, Str, Ref}) => ({
description: [ Str, "" ],
formatter: [ Ref(TickFormatter), () => new BasicTickFormatter() ],
change_formatter: [ Ref(TickFormatter), () => new NumeralTickFormatter() ],
layout: [ Str, "column" ],
source: [ Ref(ColumnDataSource) ],
plot_x: [ Str, "x" ],
plot_y: [ Str, "y" ],
plot_color: [ Str, blue ],
plot_type: [ Str, "bar" ],
pos_color: [ Str, green ],
neg_color: [ Str, red ],
title: [ Str, "" ],
value: [ Float, 0 ],
value_change: [ Float, 0 ],
}))
}
}