@hpcc-js/chart 3.6.5 → 3.7.0

package/src/Column.ts

@@ -1,684 +1,684 @@
-import { INDChart, ITooltip } from "@hpcc-js/api";
-import { d3Event, InputField, Text } from "@hpcc-js/common";
-import { format as d3Format } from "d3-format";
-import { scaleBand as d3ScaleBand } from "d3-scale";
-import { local as d3Local, select as d3Select } from "d3-selection";
-import { XYAxis } from "./XYAxis.ts";
-
-import "../src/Column.css";
-
-export class Column extends XYAxis {
-    static __inputs: InputField[] = [{
-        id: "label",
-        type: "string"
-    }, {
-        id: "values",
-        type: "number",
-        multi: true
-    }];
-
-    protected _linearGap: number;
-    private textLocal = d3Local<Text>();
-    private stackedTextLocal = d3Local<Text>();
-    private isHorizontal: boolean;
-
-    constructor() {
-        super();
-        INDChart.call(this);
-        ITooltip.call(this);
-
-        this._selection.skipBringToTop(true);
-
-        this._linearGap = 25.0;
-    }
-
-    layerEnter(host: XYAxis, element, duration: number = 250) {
-        super.layerEnter(host, element, duration);
-
-        const context = this;
-        this
-            .tooltipHTML(function (d) {
-                switch (context.tooltipStyle()) {
-                    case "series-table":
-                        return context.tooltipFormat({
-                            label: d.row[0],
-                            arr: context.columns().slice(1).map(function (column, i) {
-                                return {
-                                    label: column,
-                                    color: context._palette(column),
-                                    value: d.row[i + 1]
-                                };
-                            })
-                        });
-                    default:
-                        let value = d.row[d.idx];
-                        if (value instanceof Array) {
-                            value = value[1] - value[0];
-                        }
-                        return context.tooltipFormat({ label: d.row[0], series: context.layerColumns(host)[d.idx], value });
-                }
-            })
-            ;
-    }
-
-    adjustedData(host: XYAxis) {
-        const retVal = this.layerData(host).map(row => {
-            let prevValue = 0;
-            return row.map((cell, idx) => {
-                if (idx === 0) {
-                    return cell;
-                }
-                if (idx >= this.layerColumns(host).length) {
-                    return cell;
-                }
-                const retVal2 = host.yAxisStacked() ? [prevValue, prevValue + cell] : cell;
-                prevValue += cell;
-                return retVal2;
-            }, this);
-        }, this);
-        return retVal;
-    }
-
-    layerUpdate(host: XYAxis, element, duration: number = 250) {
-        super.layerUpdate(host, element, duration);
-        const isHorizontal = host.orientation() === "horizontal";
-        this.isHorizontal = isHorizontal;
-        const context = this;
-
-        if (this.tabNavigation() && host.parentRelativeDiv) {
-            host.parentRelativeDiv
-                .attr("tabindex", "0")
-                .attr("role", "group")
-                .attr("aria-label", `${this.columns()[0] || "Chart"} data`);
-        } else if (host.parentRelativeDiv) {
-            host.parentRelativeDiv
-                .attr("tabindex", null)
-                .attr("role", null)
-                .attr("aria-label", null);
-        }
-
-        this._palette = this._palette.switch(this.paletteID());
-        if (this.useClonedPalette()) {
-            this._palette = this._palette.cloneNotExists(this.paletteID() + "_" + this.id());
-        }
-        const formatPct = d3Format(context.showValueAsPercentFormat());
-
-        let dataLen = 10;
-        let offset = 0;
-        switch (host.xAxisType()) {
-            case "ordinal":
-                dataLen = host.bandwidth();
-                offset = -dataLen / 2;
-                break;
-            case "linear":
-            case "time":
-                dataLen = Math.max(Math.abs(host.dataPos(2) - host.dataPos(1)) * (100 - this._linearGap) / 100, dataLen);
-                offset = -dataLen / 2;
-                break;
-            default:
-        }
-
-        this.tooltip.direction(isHorizontal ? "n" : "e");
-
-        const columnScale = d3ScaleBand()
-            .domain(context.layerColumns(host).filter(function (_d, idx) { return idx > 0; }))
-            .rangeRound(isHorizontal ? [0, dataLen] : [dataLen, 0])
-            .paddingInner(Math.max(this.xAxisSeriesPaddingInner(), 0.05))
-            .paddingOuter(0)
-            ;
-        let domainSums = [];
-        const seriesSums = [];
-        const columnLength = this.columns().length;
-        const rowData = this.data();
-        if (this.showValue() && this.showValueAsPercent() === "series") {
-            rowData.forEach((row) => {
-                row.filter((_, idx) => idx > 0 && idx < columnLength).forEach((col, idx) => {
-                    if (seriesSums[idx + 1] === undefined) {
-                        seriesSums[idx + 1] = 0;
-                    }
-                    seriesSums[idx + 1] += col;
-                });
-            });
-        }
-
-        if (this.showDomainTotal() || (this.showValue() && this.showValueAsPercent() === "domain")) {
-            domainSums = rowData.map(row => {
-                return row.filter((cell, idx) => idx > 0 && idx < columnLength).reduce((sum, cell) => {
-                    return sum + cell;
-                }, 0);
-            });
-        }
-
-        const column = element.selectAll(".dataRow")
-            .data(this.adjustedData(host))
-            ;
-        const hostData = host.data();
-        const axisSize = this.getAxisSize(host);
-        column.enter().append("g")
-            .attr("class", "dataRow")
-            .merge(column)
-            .each(function (dataRow, dataRowIdx) {
-                const element = d3Select(this);
-
-                const columnGRect = element.selectAll(".dataCell").data(dataRow.filter(function (_d, i) { return i < context.layerColumns(host).length; }).map(function (d, i) {
-                    return {
-                        column: context.layerColumns(host)[i],
-                        row: dataRow,
-                        origRow: hostData[dataRowIdx],
-                        value: d,
-                        idx: i
-                    };
-                }).filter(function (d) { return d.value !== null && d.idx > 0; }), (d: any) => d.column);
-
-                const columnGEnter = columnGRect
-                    .enter().append("g")
-                    .attr("class", "dataCell")
-                    .on("mouseout.tooltip", function (d: any) {
-                        if (!context.tooltipInnerTextEllipsedOnly() || (d.innerTextObj && d.innerTextObj.isTruncated)) {
-                            context.tooltip.hide.apply(context, arguments);
-                        }
-                    })
-                    .on("mousemove.tooltip", function (d: any) {
-                        if (!context.tooltipInnerTextEllipsedOnly() || (d.innerTextObj && d.innerTextObj.isTruncated)) {
-                            context.tooltip.show.apply(context, arguments);
-                        }
-                    })
-                    .call(host._selection.enter.bind(host._selection))
-                    .on("click", function (d: any) {
-                        context.click(host.rowToObj(d.origRow), d.column, host._selection.selected(this));
-                    })
-                    .on("dblclick", function (d: any) {
-                        context.dblclick(host.rowToObj(d.origRow), d.column, host._selection.selected(this));
-                    })
-                    .on("keydown", function (evt, d: any) {
-                        if (context.tabNavigation()) {
-                            const event = d3Event();
-                            if (event.code === "Space" || event.key === "Enter") {
-                                event.preventDefault();
-                                host._selection.click(this);
-                            }
-                        }
-                    })
-                    .style("opacity", 0)
-                    .each(function (this: SVGElement, d: any) {
-                        const element = d3Select(this);
-                        element.append("rect")
-                            .attr("class", "columnRect series series-" + context.cssTag(d.column))
-                            ;
-                        element.append("text")
-                            .attr("class", "columnRectText")
-                            .style("stroke", "transparent")
-                            ;
-                    })
-                    ;
-                columnGEnter.transition().duration(duration)
-                    .style("opacity", 1)
-                    ;
-                const domainLength = host.yAxisStacked() ? dataLen : columnScale.bandwidth();
-                columnGEnter.merge(columnGRect as any)
-                    .attr("tabindex", context.tabNavigation() ? 0 : null) // Tabster Groupper manages these inner focusables
-                    .attr("role", context.tabNavigation() ? "button" : null) // ARIA role for accessibility
-                    .attr("aria-label", context.tabNavigation() ? (d: any) => `${d.origRow[0]} - ${d.column}: ${d.value instanceof Array ? d.value[1] - d.value[0] : d.value}` : null)
-                    .each(function (this: SVGElement, d: any) {
-                        const element = d3Select(this);
-                        const domainPos = host.dataPos(dataRow[0]) + (host.yAxisStacked() ? 0 : columnScale(d.column)) + offset;
-                        const upperValue = d.value instanceof Array ? d.value[1] : d.value;
-                        let valueText = d.origRow[d.idx];
-                        if (context.showValue()) {
-                            const dm = context.dataMeta();
-                            switch (context.showValueAsPercent()) {
-                                case "series":
-                                    const seriesSum = typeof dm.sum !== "undefined" ? dm.sum : seriesSums[d.idx];
-                                    valueText = formatPct(valueText / seriesSum);
-                                    break;
-                                case "domain":
-                                    const domainSum = typeof dm.sum !== "undefined" ? dm.sum : domainSums[dataRowIdx];
-                                    valueText = formatPct(valueText / domainSum);
-                                    break;
-                                case null:
-                                default:
-                                    valueText = d3Format(context.showValueFormat())(valueText);
-                                    break;
-                            }
-                        }
-                        const upperValuePos = host.valuePos(upperValue);
-                        const lowerValuePos = host.valuePos(d.value instanceof Array ? d.value[0] : 0);
-                        const valuePos = Math.min(lowerValuePos, upperValuePos);
-                        const valueLength = Math.abs(upperValuePos - lowerValuePos);
-
-                        const innerTextHeight = context.innerTextFontSize();
-                        const innerTextPadding = context.innerTextPadding_exists() ? context.innerTextPadding() : innerTextHeight / 2.5;
-
-                        const dataRect = context.intersectRectRect(
-                            {
-                                x: isHorizontal ? domainPos : valuePos,
-                                y: isHorizontal ? valuePos : domainPos,
-                                width: isHorizontal ? domainLength : valueLength,
-                                height: isHorizontal ? valueLength : domainLength
-                            },
-                            {
-                                x: 0,
-                                y: 0,
-                                width: axisSize.width,
-                                height: axisSize.height
-                            }
-                        );
-
-                        const _rects = element.select("rect").transition().duration(duration)
-                            .style("fill", (d: any) => context.fillColor(d.row, d.column, d.value, d.origRow))
-                            ;
-
-                        if (isHorizontal) {
-                            _rects
-                                .attr("x", domainPos)
-                                .attr("y", valuePos)
-                                .attr("width", domainLength)
-                                .attr("height", valueLength)
-                                ;
-                        } else {
-                            _rects
-                                .attr("y", domainPos)
-                                .attr("x", valuePos)
-                                .attr("height", domainLength)
-                                .attr("width", valueLength)
-                                ;
-                        }
-                        const _texts = element.select("text").transition().duration(duration)
-                            .style("font-size", innerTextHeight + "px")
-                            .style("fill", (d: any) => context.textColor(d.row, d.column, d.value, d.origRow))
-                            ;
-
-                        _texts.style("font-family", context.innerTextFontFamily_exists() ? context.innerTextFontFamily() : null);
-
-                        const padding = context.innerTextPadding_exists() ? context.innerTextPadding() : 8;
-
-                        const textHeightOffset = innerTextHeight / 2.7;
-
-                        if (isHorizontal) { // Column
-                            const y = dataRect.y + dataRect.height - innerTextPadding;
-                            _texts
-                                .attr("x", domainPos + (domainLength / 2))
-                                .attr("y", y + textHeightOffset)
-                                .attr("transform", `rotate(-90, ${domainPos + (domainLength / 2)}, ${y})`)
-                                ;
-                        } else { // Bar
-                            _texts
-                                .attr("x", dataRect.x + padding)
-                                .attr("y", domainPos + (domainLength / 2) + textHeightOffset)
-                                ;
-                        }
-                        _texts
-                            .attr("height", domainLength)
-                            .attr("width", valueLength)
-                            ;
-                        if (context.showInnerText()) {
-                            _texts
-                                .text((d: any) => {
-                                    const innerText = context.innerText(d.origRow, d.origRow[columnLength], d.idx);
-                                    if (innerText) {
-                                        const clippedValueLength = isHorizontal ? dataRect.height : dataRect.width;
-                                        const innerTextObj = context.calcInnerText(clippedValueLength, innerText, valueText);
-                                        d.innerTextObj = innerTextObj;
-
-                                        return innerTextObj.text;
-                                    }
-                                    return "";
-                                })
-                                ;
-                        }
-                        const dataText = element.selectAll(".dataText").data(context.showValue() ? [`${upperValue}`] : []);
-                        const dataTextEnter = dataText.enter().append("g")
-                            .attr("class", "dataText")
-                            .each(function (this: SVGElement, d) {
-                                context.textLocal.set(this, new Text().target(this).colorStroke_default("transparent"));
-                            });
-                        dataTextEnter.merge(dataText as any)
-                            .each(function (this: SVGElement) {
-                                const pos = { x: 0, y: 0 };
-                                const valueFontFamily = context.valueFontFamily();
-                                const valueFontSize = context.valueFontSize();
-                                const textSize = context.textSize(valueText, valueFontFamily, valueFontSize);
-
-                                const isPositive = parseFloat(valueText) >= 0;
-
-                                let valueAnchor = context.valueAnchor() ? context.valueAnchor() : isHorizontal ? "middle" : "start";
-
-                                const leftSpace = dataRect.x;
-                                const rightSpace = axisSize.width - (dataRect.x + dataRect.width);
-                                const topSpace = dataRect.y;
-                                const bottomSpace = axisSize.height - (dataRect.y + dataRect.height);
-
-                                let noRoomInside;
-                                let isOutside;
-                                let noRoomOnExpectedSide;
-
-                                if (d.innerTextObj) {
-                                    const { padding, valueTextWidth } = d.innerTextObj;
-                                    isOutside = false;
-                                    if (isHorizontal) { // Column
-                                        valueAnchor = "middle";
-                                        pos.x = domainPos + (domainLength / 2);
-
-                                        if (d.innerTextObj.category === 4) {
-                                            isOutside = true;
-                                            pos.y = valuePos - padding - (valueFontSize / 2);
-                                        } else {
-                                            pos.y = valuePos + padding + (valueFontSize / 2);
-                                        }
-                                    } else { // Bar
-                                        valueAnchor = "start";
-                                        if (d.innerTextObj.category === 4) {
-                                            isOutside = true;
-                                            pos.x = (valueLength + valuePos) + padding;
-                                        } else {
-                                            pos.x = (valueLength + valuePos) - valueTextWidth - padding;
-                                        }
-                                        pos.y = domainPos + (domainLength / 2);
-                                    }
-                                } else {
-                                    /*
-                                    IF this.valueCentered() and NO ROOM INSIDE
-                                        ...then ASSUME THERES ROOM OUTSIDE
-                                        IF NO ROOM OUTSIDE ON EXPECTED SIDE
-                                            ...then ASSUME THERES ROOM ON THE OPPOSITE SIDE
-                                    */
-                                    if (isHorizontal) { // Column
-                                        noRoomInside = dataRect.height < textSize.height;
-                                        isOutside = !context.valueCentered() || noRoomInside;
-
-                                        pos.x = dataRect.x + (dataRect.width / 2);
-
-                                        if (isOutside) {
-                                            if (isPositive) {
-                                                noRoomOnExpectedSide = topSpace < textSize.height + padding;
-                                                if (noRoomOnExpectedSide) {
-                                                    if (!noRoomInside) {
-                                                        isOutside = false;
-                                                        pos.y = dataRect.y + (dataRect.height / 2);
-                                                    } else {
-                                                        pos.y = dataRect.y + dataRect.height + textSize.height;
-                                                    }
-                                                } else {
-                                                    pos.y = dataRect.y - (textSize.height / 2) - padding;
-                                                }
-                                            } else {
-                                                noRoomOnExpectedSide = bottomSpace < textSize.height;
-                                                if (noRoomOnExpectedSide) {
-                                                    if (!noRoomInside) {
-                                                        isOutside = false;
-                                                        pos.y = dataRect.y + (dataRect.height / 2);
-                                                    } else {
-                                                        pos.y = dataRect.y - (textSize.height / 2) - padding;
-                                                    }
-                                                } else {
-                                                    pos.y = dataRect.y + textSize.height + padding;
-                                                }
-                                            }
-                                        } else {
-                                            pos.y = dataRect.y + (dataRect.height / 2);
-                                        }
-                                    } else { // Bar
-                                        noRoomInside = dataRect.width < textSize.width;
-                                        isOutside = !context.valueCentered() || noRoomInside;
-
-                                        pos.y = dataRect.y + (dataRect.height / 2);
-
-                                        if (isOutside) {
-                                            if (isPositive) {
-                                                noRoomOnExpectedSide = rightSpace < textSize.width + padding;
-                                                if (noRoomOnExpectedSide) {
-                                                    if (context.showInnerText() || !noRoomInside) {
-                                                        isOutside = false;
-                                                        pos.x = dataRect.x + (dataRect.width / 2);
-                                                    } else {
-                                                        pos.x = dataRect.x - (textSize.width - padding);
-                                                    }
-                                                } else {
-                                                    pos.x = dataRect.x + dataRect.width + (textSize.width / 2) + padding;
-                                                }
-                                            } else {
-                                                noRoomOnExpectedSide = leftSpace < textSize.width;
-                                                if (noRoomOnExpectedSide) {
-                                                    if (context.showInnerText() || !noRoomInside) {
-                                                        isOutside = false;
-                                                        pos.x = dataRect.x + (dataRect.width / 2);
-                                                    } else {
-                                                        pos.x = dataRect.x + dataRect.width + (textSize.width - padding);
-                                                    }
-                                                } else {
-                                                    pos.x = dataRect.x - (textSize.width - padding);
-                                                }
-                                            }
-                                        } else {
-                                            pos.x = dataRect.x + (dataRect.width / 2);
-                                        }
-                                    }
-                                }
-                                const textColor = isOutside ? null : context.textColor(d.row, d.column, d.value, d.origRow);
-
-                                //  Prevent overlapping labels on stacked columns
-                                const columns = context.columns();
-                                const hideValue = (context.yAxisStacked() && noRoomInside) ||
-                                    (isOutside && context.yAxisStacked() && columns.indexOf(d.column) !== columns.length - 1);
-                                context.textLocal.get(this)
-                                    .pos(pos)
-                                    .anchor(valueAnchor)
-                                    .fontFamily(valueFontFamily)
-                                    .fontSize(valueFontSize)
-                                    .text(`${valueText}`)
-                                    .colorFill(textColor)
-                                    .visible(context.showValue() && !hideValue)
-                                    .render()
-                                    ;
-
-                            });
-                        dataText.exit()
-                            .each(function (this: SVGElement, d) {
-                                context.textLocal.get(this).target(null);
-                            })
-                            .remove()
-                            ;
-                    });
-                columnGRect.exit().transition().duration(duration)
-                    .style("opacity", 0)
-                    .remove()
-                    ;
-
-                const value4pos = host.yAxisStacked() ? domainSums[dataRowIdx] : Math.max(...dataRow.filter((_, idx) => idx > 0 && idx < columnLength));
-                const stackedTotalText = element.selectAll(".stackedTotalText").data(context.showDomainTotal() ? [domainSums[dataRowIdx]] : []);
-                const stackedTotalTextEnter = stackedTotalText.enter().append("g")
-                    .attr("class", "stackedTotalText")
-                    .each(function (this: SVGElement, d) {
-                        context.stackedTextLocal.set(this, new Text().target(this).colorStroke_default("transparent"));
-                    });
-                stackedTotalTextEnter.merge(stackedTotalText as any)
-                    .each(function (this: SVGElement, d: any) {
-                        const pos = { x: 0, y: 0 };
-                        const domainPos = host.dataPos(dataRow[0]);
-                        const valuePos = host.valuePos(value4pos);
-
-                        const valueFontFamily = context.valueFontFamily();
-                        const valueFontSize = context.valueFontSize();
-                        const textSize = context.textSize(d, valueFontFamily, valueFontSize);
-
-                        const isPositive = parseFloat(d) >= 0;
-                        let valueAnchor: "start" | "middle" | "end" = "middle";
-                        if (isHorizontal) {
-                            pos.x = domainPos;
-                            if (isPositive) {
-                                pos.y = valuePos - textSize.height / 2;
-                            } else {
-                                pos.y = valuePos + textSize.height / 2;
-                            }
-                        } else {
-                            valueAnchor = "start";
-                            pos.y = domainPos;
-                            if (isPositive) {
-                                pos.x = valuePos + textSize.width / 2;
-                            } else {
-                                pos.x = valuePos - textSize.width / 2;
-                            }
-                        }
-
-                        context.stackedTextLocal.get(this)
-                            .pos(pos)
-                            .anchor(valueAnchor)
-                            .fontFamily(valueFontFamily)
-                            .fontSize(valueFontSize)
-                            .text(d)
-                            .render()
-                            ;
-
-                    });
-                stackedTotalText.exit()
-                    .each(function (this: SVGElement, d) {
-                        context.textLocal.get(this).target(null);
-                    })
-                    .remove()
-                    ;
-            });
-        column.exit().transition().duration(duration)
-            .remove()
-            ;
-    }
-
-    calcInnerText(offset, innerText, valueText) {
-        const fontFamily = this.innerTextFontFamily_exists() ? this.innerTextFontFamily() : "Verdana";
-        const fontSize = this.innerTextFontSize();
-        const valueFontFamily = this.valueFontFamily_exists() ? this.valueFontFamily() : "Verdana";
-        const valueFontSize = this.valueFontSize();
-        const padding = this.innerTextPadding_exists() ? this.innerTextPadding() : fontSize / 2.5;
-        const valueTextWidth = this.isHorizontal ? valueFontSize : this.textSize(valueText, valueFontFamily, valueFontSize).width;
-        const ellipsisWidth = this.textSize("...", fontFamily, fontSize).width;
-        const innerTextWidth = this.textSize(innerText, fontFamily, fontSize).width;
-        const origInnerText = innerText;
-
-        const fullWidth = (padding * 3) + innerTextWidth + valueTextWidth;
-        const fullWidth2 = (padding * 3) + ellipsisWidth + valueTextWidth;
-        const fullWidth3 = (padding * 1) + valueTextWidth;
-        /*
-        Categories:
-            1) room to display inner text (with padding) AND value text (with padding)
-            2) room to display ellipsis (with padding) AND value text (with padding)
-            3) room to display value text only (with padding)
-            4) no room to display any text except value on the outside
-        */
-        let category = 4;
-        if (fullWidth < offset) {
-            category = 1;
-        } else if (fullWidth2 < offset) {
-            const excessWidth = offset - fullWidth2;
-            let _text = "";
-            for (const letter of innerText) {
-                if (this.textSize(_text + letter, fontFamily, fontSize).width > excessWidth) {
-                    innerText = _text + "...";
-                    break;
-                } else {
-                    _text += letter;
-                }
-            }
-            category = 2;
-        } else if (fullWidth3 < offset) {
-            innerText = "";
-            category = 3;
-        } else {
-            innerText = "";
-        }
-
-        return {
-            text: innerText,
-            isTruncated: origInnerText !== innerText,
-            padding,
-            category,
-            valueTextWidth
-        };
-    }
-
-    innerText(origRow, lparam, idx): string {
-        return origRow[0];
-    }
-}
-Column.prototype._class += " chart_Column";
-Column.prototype.implements(INDChart.prototype);
-Column.prototype.implements(ITooltip.prototype);
-
-export interface Column {
-    paletteID(): string;
-    paletteID(_: string): this;
-    useClonedPalette(): boolean;
-    useClonedPalette(_: boolean): this;
-    showValue(): boolean;
-    showValue(_: boolean): this;
-    showInnerText(): boolean;
-    showInnerText(_: boolean): this;
-    showValueFormat(): string;
-    showValueFormat(_: string): this;
-    showValueAsPercent(): null | "series" | "domain";
-    showValueAsPercent(_: null | "series" | "domain"): this;
-    showValueAsPercentFormat(): string;
-    showValueAsPercentFormat(_: string): this;
-    showDomainTotal(): boolean;
-    showDomainTotal(_: boolean): this;
-    valueCentered(): boolean;
-    valueCentered(_: boolean): this;
-    valueAnchor(): "start" | "middle" | "end";
-    valueAnchor(_: "start" | "middle" | "end"): this;
-    valueFontFamily(): string;
-    valueFontFamily(_: string): this;
-    valueFontFamily_exists(): boolean;
-    valueFontSize(): number;
-    valueFontSize(_: number): this;
-    xAxisSeriesPaddingInner(): number;
-    xAxisSeriesPaddingInner(_: number): this;
-    innerTextFontFamily(): string;
-    innerTextFontFamily(_: string): this;
-    innerTextFontFamily_exists(): boolean;
-    innerTextFontSize(): number;
-    innerTextFontSize(_: number): this;
-    innerTextPadding(): number;
-    innerTextPadding(_: number): this;
-    innerTextPadding_exists(): boolean;
-    tooltipInnerTextEllipsedOnly(): boolean;
-    tooltipInnerTextEllipsedOnly(_: boolean): this;
-
-    //  INDChart  ---
-    fillColor(row, column, value, origRow): string;
-    textColor(row, column, value, origRow): string;
-    dblclick(row, column, selected): void;
-
-    //  ITooltip  ---
-    tooltip;
-    tooltipHTML(_): string;
-    tooltipFormat(_): string;
-    tooltipStyle(): "default" | "none" | "series-table";
-    tooltipStyle(_: "default" | "none" | "series-table"): this;
-}
-
-Column.prototype.publish("valueFontFamily", null, "string", "Font family of value text", null, { optional: true });
-Column.prototype.publish("valueFontSize", 12, "number", "Height of value text (pixels)");
-Column.prototype.publish("innerTextFontFamily", null, "string", "Font family of inner text", null, { optional: true });
-Column.prototype.publish("innerTextPadding", 8, "number", "Offset of inner text (pixels)", null, { optional: true });
-Column.prototype.publish("innerTextFontSize", 12, "number", "Height of inner text (pixels)");
-Column.prototype.publish("paletteID", "default", "set", "Color palette for this widget", () => Column.prototype._palette.switch(), { tags: ["Basic", "Shared"] });
-Column.prototype.publish("useClonedPalette", false, "boolean", "Enable or disable using a cloned palette", null, { tags: ["Intermediate", "Shared"] });
-Column.prototype.publish("showValue", false, "boolean", "Show Value in column");
-Column.prototype.publish("showInnerText", false, "boolean", "Show Label in column");
-Column.prototype.publish("showValueFormat", ",", "string", "D3 Format for Value", null, { disable: (w: Column) => !w.showValue() || !!w.showValueAsPercent() });
-Column.prototype.publish("showValueAsPercent", null, "set", "If showValue is true, optionally show value as a percentage by Series or Domain", [null, "series", "domain"], { disable: w => !w.showValue(), optional: true });
-Column.prototype.publish("showValueAsPercentFormat", ".0%", "string", "D3 Format for %", null, { disable: (w: Column) => !w.showValue() || !w.showValueAsPercent() });
-Column.prototype.publish("showDomainTotal", false, "boolean", "Show Total Value for Stacked Columns", null);
-Column.prototype.publish("valueCentered", false, "boolean", "Show Value in center of column");
-Column.prototype.publish("valueAnchor", "middle", "set", "text-anchor for shown value text", ["start", "middle", "end"]);
-Column.prototype.publish("xAxisSeriesPaddingInner", 0.0, "number", "Determines the ratio of the range that is reserved for blank space between band (0->1)");
-Column.prototype.publish("tooltipInnerTextEllipsedOnly", false, "boolean", "Show tooltip only when inner text is truncated with an ellipsis");
-
-/*
-const origUseClonedPalette = Column.prototype.useClonedPalette;
-Column.prototype.useClonedPalette = function (this: Column, _?) {
-    const retVal = origUseClonedPalette.apply(this, arguments);
-    if (arguments.length) {
-        this._useClonedPalette = _;
-    }
-    return retVal;;
-}
-*/
+import { INDChart, ITooltip } from "@hpcc-js/api";
+import { d3Event, InputField, Text } from "@hpcc-js/common";
+import { format as d3Format } from "d3-format";
+import { scaleBand as d3ScaleBand } from "d3-scale";
+import { local as d3Local, select as d3Select } from "d3-selection";
+import { XYAxis } from "./XYAxis.ts";
+
+import "../src/Column.css";
+
+export class Column extends XYAxis {
+    static __inputs: InputField[] = [{
+        id: "label",
+        type: "string"
+    }, {
+        id: "values",
+        type: "number",
+        multi: true
+    }];
+
+    protected _linearGap: number;
+    private textLocal = d3Local<Text>();
+    private stackedTextLocal = d3Local<Text>();
+    private isHorizontal: boolean;
+
+    constructor() {
+        super();
+        INDChart.call(this);
+        ITooltip.call(this);
+
+        this._selection.skipBringToTop(true);
+
+        this._linearGap = 25.0;
+    }
+
+    layerEnter(host: XYAxis, element, duration: number = 250) {
+        super.layerEnter(host, element, duration);
+
+        const context = this;
+        this
+            .tooltipHTML(function (d) {
+                switch (context.tooltipStyle()) {
+                    case "series-table":
+                        return context.tooltipFormat({
+                            label: d.row[0],
+                            arr: context.columns().slice(1).map(function (column, i) {
+                                return {
+                                    label: column,
+                                    color: context._palette(column),
+                                    value: d.row[i + 1]
+                                };
+                            })
+                        });
+                    default:
+                        let value = d.row[d.idx];
+                        if (value instanceof Array) {
+                            value = value[1] - value[0];
+                        }
+                        return context.tooltipFormat({ label: d.row[0], series: context.layerColumns(host)[d.idx], value });
+                }
+            })
+            ;
+    }
+
+    adjustedData(host: XYAxis) {
+        const retVal = this.layerData(host).map(row => {
+            let prevValue = 0;
+            return row.map((cell, idx) => {
+                if (idx === 0) {
+                    return cell;
+                }
+                if (idx >= this.layerColumns(host).length) {
+                    return cell;
+                }
+                const retVal2 = host.yAxisStacked() ? [prevValue, prevValue + cell] : cell;
+                prevValue += cell;
+                return retVal2;
+            }, this);
+        }, this);
+        return retVal;
+    }
+
+    layerUpdate(host: XYAxis, element, duration: number = 250) {
+        super.layerUpdate(host, element, duration);
+        const isHorizontal = host.orientation() === "horizontal";
+        this.isHorizontal = isHorizontal;
+        const context = this;
+
+        if (this.tabNavigation() && host.parentRelativeDiv) {
+            host.parentRelativeDiv
+                .attr("tabindex", "0")
+                .attr("role", "group")
+                .attr("aria-label", `${this.columns()[0] || "Chart"} data`);
+        } else if (host.parentRelativeDiv) {
+            host.parentRelativeDiv
+                .attr("tabindex", null)
+                .attr("role", null)
+                .attr("aria-label", null);
+        }
+
+        this._palette = this._palette.switch(this.paletteID());
+        if (this.useClonedPalette()) {
+            this._palette = this._palette.cloneNotExists(this.paletteID() + "_" + this.id());
+        }
+        const formatPct = d3Format(context.showValueAsPercentFormat());
+
+        let dataLen = 10;
+        let offset = 0;
+        switch (host.xAxisType()) {
+            case "ordinal":
+                dataLen = host.bandwidth();
+                offset = -dataLen / 2;
+                break;
+            case "linear":
+            case "time":
+                dataLen = Math.max(Math.abs(host.dataPos(2) - host.dataPos(1)) * (100 - this._linearGap) / 100, dataLen);
+                offset = -dataLen / 2;
+                break;
+            default:
+        }
+
+        this.tooltip.direction(isHorizontal ? "n" : "e");
+
+        const columnScale = d3ScaleBand()
+            .domain(context.layerColumns(host).filter(function (_d, idx) { return idx > 0; }))
+            .rangeRound(isHorizontal ? [0, dataLen] : [dataLen, 0])
+            .paddingInner(Math.max(this.xAxisSeriesPaddingInner(), 0.05))
+            .paddingOuter(0)
+            ;
+        let domainSums = [];
+        const seriesSums = [];
+        const columnLength = this.columns().length;
+        const rowData = this.data();
+        if (this.showValue() && this.showValueAsPercent() === "series") {
+            rowData.forEach((row) => {
+                row.filter((_, idx) => idx > 0 && idx < columnLength).forEach((col, idx) => {
+                    if (seriesSums[idx + 1] === undefined) {
+                        seriesSums[idx + 1] = 0;
+                    }
+                    seriesSums[idx + 1] += col;
+                });
+            });
+        }
+
+        if (this.showDomainTotal() || (this.showValue() && this.showValueAsPercent() === "domain")) {
+            domainSums = rowData.map(row => {
+                return row.filter((cell, idx) => idx > 0 && idx < columnLength).reduce((sum, cell) => {
+                    return sum + cell;
+                }, 0);
+            });
+        }
+
+        const column = element.selectAll(".dataRow")
+            .data(this.adjustedData(host))
+            ;
+        const hostData = host.data();
+        const axisSize = this.getAxisSize(host);
+        column.enter().append("g")
+            .attr("class", "dataRow")
+            .merge(column)
+            .each(function (dataRow, dataRowIdx) {
+                const element = d3Select(this);
+
+                const columnGRect = element.selectAll(".dataCell").data(dataRow.filter(function (_d, i) { return i < context.layerColumns(host).length; }).map(function (d, i) {
+                    return {
+                        column: context.layerColumns(host)[i],
+                        row: dataRow,
+                        origRow: hostData[dataRowIdx],
+                        value: d,
+                        idx: i
+                    };
+                }).filter(function (d) { return d.value !== null && d.idx > 0; }), (d: any) => d.column);
+
+                const columnGEnter = columnGRect
+                    .enter().append("g")
+                    .attr("class", "dataCell")
+                    .on("mouseout.tooltip", function (d: any) {
+                        if (!context.tooltipInnerTextEllipsedOnly() || (d.innerTextObj && d.innerTextObj.isTruncated)) {
+                            context.tooltip.hide.apply(context, arguments);
+                        }
+                    })
+                    .on("mousemove.tooltip", function (d: any) {
+                        if (!context.tooltipInnerTextEllipsedOnly() || (d.innerTextObj && d.innerTextObj.isTruncated)) {
+                            context.tooltip.show.apply(context, arguments);
+                        }
+                    })
+                    .call(host._selection.enter.bind(host._selection))
+                    .on("click", function (d: any) {
+                        context.click(host.rowToObj(d.origRow), d.column, host._selection.selected(this));
+                    })
+                    .on("dblclick", function (d: any) {
+                        context.dblclick(host.rowToObj(d.origRow), d.column, host._selection.selected(this));
+                    })
+                    .on("keydown", function (evt, d: any) {
+                        if (context.tabNavigation()) {
+                            const event = d3Event();
+                            if (event.code === "Space" || event.key === "Enter") {
+                                event.preventDefault();
+                                host._selection.click(this);
+                            }
+                        }
+                    })
+                    .style("opacity", 0)
+                    .each(function (this: SVGElement, d: any) {
+                        const element = d3Select(this);
+                        element.append("rect")
+                            .attr("class", "columnRect series series-" + context.cssTag(d.column))
+                            ;
+                        element.append("text")
+                            .attr("class", "columnRectText")
+                            .style("stroke", "transparent")
+                            ;
+                    })
+                    ;
+                columnGEnter.transition().duration(duration)
+                    .style("opacity", 1)
+                    ;
+                const domainLength = host.yAxisStacked() ? dataLen : columnScale.bandwidth();
+                columnGEnter.merge(columnGRect as any)
+                    .attr("tabindex", context.tabNavigation() ? 0 : null) // Tabster Groupper manages these inner focusables
+                    .attr("role", context.tabNavigation() ? "button" : null) // ARIA role for accessibility
+                    .attr("aria-label", context.tabNavigation() ? (d: any) => `${d.origRow[0]} - ${d.column}: ${d.value instanceof Array ? d.value[1] - d.value[0] : d.value}` : null)
+                    .each(function (this: SVGElement, d: any) {
+                        const element = d3Select(this);
+                        const domainPos = host.dataPos(dataRow[0]) + (host.yAxisStacked() ? 0 : columnScale(d.column)) + offset;
+                        const upperValue = d.value instanceof Array ? d.value[1] : d.value;
+                        let valueText = d.origRow[d.idx];
+                        if (context.showValue()) {
+                            const dm = context.dataMeta();
+                            switch (context.showValueAsPercent()) {
+                                case "series":
+                                    const seriesSum = typeof dm.sum !== "undefined" ? dm.sum : seriesSums[d.idx];
+                                    valueText = formatPct(valueText / seriesSum);
+                                    break;
+                                case "domain":
+                                    const domainSum = typeof dm.sum !== "undefined" ? dm.sum : domainSums[dataRowIdx];
+                                    valueText = formatPct(valueText / domainSum);
+                                    break;
+                                case null:
+                                default:
+                                    valueText = d3Format(context.showValueFormat())(valueText);
+                                    break;
+                            }
+                        }
+                        const upperValuePos = host.valuePos(upperValue);
+                        const lowerValuePos = host.valuePos(d.value instanceof Array ? d.value[0] : 0);
+                        const valuePos = Math.min(lowerValuePos, upperValuePos);
+                        const valueLength = Math.abs(upperValuePos - lowerValuePos);
+
+                        const innerTextHeight = context.innerTextFontSize();
+                        const innerTextPadding = context.innerTextPadding_exists() ? context.innerTextPadding() : innerTextHeight / 2.5;
+
+                        const dataRect = context.intersectRectRect(
+                            {
+                                x: isHorizontal ? domainPos : valuePos,
+                                y: isHorizontal ? valuePos : domainPos,
+                                width: isHorizontal ? domainLength : valueLength,
+                                height: isHorizontal ? valueLength : domainLength
+                            },
+                            {
+                                x: 0,
+                                y: 0,
+                                width: axisSize.width,
+                                height: axisSize.height
+                            }
+                        );
+
+                        const _rects = element.select("rect").transition().duration(duration)
+                            .style("fill", (d: any) => context.fillColor(d.row, d.column, d.value, d.origRow))
+                            ;
+
+                        if (isHorizontal) {
+                            _rects
+                                .attr("x", domainPos)
+                                .attr("y", valuePos)
+                                .attr("width", domainLength)
+                                .attr("height", valueLength)
+                                ;
+                        } else {
+                            _rects
+                                .attr("y", domainPos)
+                                .attr("x", valuePos)
+                                .attr("height", domainLength)
+                                .attr("width", valueLength)
+                                ;
+                        }
+                        const _texts = element.select("text").transition().duration(duration)
+                            .style("font-size", innerTextHeight + "px")
+                            .style("fill", (d: any) => context.textColor(d.row, d.column, d.value, d.origRow))
+                            ;
+
+                        _texts.style("font-family", context.innerTextFontFamily_exists() ? context.innerTextFontFamily() : null);
+
+                        const padding = context.innerTextPadding_exists() ? context.innerTextPadding() : 8;
+
+                        const textHeightOffset = innerTextHeight / 2.7;
+
+                        if (isHorizontal) { // Column
+                            const y = dataRect.y + dataRect.height - innerTextPadding;
+                            _texts
+                                .attr("x", domainPos + (domainLength / 2))
+                                .attr("y", y + textHeightOffset)
+                                .attr("transform", `rotate(-90, ${domainPos + (domainLength / 2)}, ${y})`)
+                                ;
+                        } else { // Bar
+                            _texts
+                                .attr("x", dataRect.x + padding)
+                                .attr("y", domainPos + (domainLength / 2) + textHeightOffset)
+                                ;
+                        }
+                        _texts
+                            .attr("height", domainLength)
+                            .attr("width", valueLength)
+                            ;
+                        if (context.showInnerText()) {
+                            _texts
+                                .text((d: any) => {
+                                    const innerText = context.innerText(d.origRow, d.origRow[columnLength], d.idx);
+                                    if (innerText) {
+                                        const clippedValueLength = isHorizontal ? dataRect.height : dataRect.width;
+                                        const innerTextObj = context.calcInnerText(clippedValueLength, innerText, valueText);
+                                        d.innerTextObj = innerTextObj;
+
+                                        return innerTextObj.text;
+                                    }
+                                    return "";
+                                })
+                                ;
+                        }
+                        const dataText = element.selectAll(".dataText").data(context.showValue() ? [`${upperValue}`] : []);
+                        const dataTextEnter = dataText.enter().append("g")
+                            .attr("class", "dataText")
+                            .each(function (this: SVGElement, d) {
+                                context.textLocal.set(this, new Text().target(this).colorStroke_default("transparent"));
+                            });
+                        dataTextEnter.merge(dataText as any)
+                            .each(function (this: SVGElement) {
+                                const pos = { x: 0, y: 0 };
+                                const valueFontFamily = context.valueFontFamily();
+                                const valueFontSize = context.valueFontSize();
+                                const textSize = context.textSize(valueText, valueFontFamily, valueFontSize);
+
+                                const isPositive = parseFloat(valueText) >= 0;
+
+                                let valueAnchor = context.valueAnchor() ? context.valueAnchor() : isHorizontal ? "middle" : "start";
+
+                                const leftSpace = dataRect.x;
+                                const rightSpace = axisSize.width - (dataRect.x + dataRect.width);
+                                const topSpace = dataRect.y;
+                                const bottomSpace = axisSize.height - (dataRect.y + dataRect.height);
+
+                                let noRoomInside;
+                                let isOutside;
+                                let noRoomOnExpectedSide;
+
+                                if (d.innerTextObj) {
+                                    const { padding, valueTextWidth } = d.innerTextObj;
+                                    isOutside = false;
+                                    if (isHorizontal) { // Column
+                                        valueAnchor = "middle";
+                                        pos.x = domainPos + (domainLength / 2);
+
+                                        if (d.innerTextObj.category === 4) {
+                                            isOutside = true;
+                                            pos.y = valuePos - padding - (valueFontSize / 2);
+                                        } else {
+                                            pos.y = valuePos + padding + (valueFontSize / 2);
+                                        }
+                                    } else { // Bar
+                                        valueAnchor = "start";
+                                        if (d.innerTextObj.category === 4) {
+                                            isOutside = true;
+                                            pos.x = (valueLength + valuePos) + padding;
+                                        } else {
+                                            pos.x = (valueLength + valuePos) - valueTextWidth - padding;
+                                        }
+                                        pos.y = domainPos + (domainLength / 2);
+                                    }
+                                } else {
+                                    /*
+                                    IF this.valueCentered() and NO ROOM INSIDE
+                                        ...then ASSUME THERES ROOM OUTSIDE
+                                        IF NO ROOM OUTSIDE ON EXPECTED SIDE
+                                            ...then ASSUME THERES ROOM ON THE OPPOSITE SIDE
+                                    */
+                                    if (isHorizontal) { // Column
+                                        noRoomInside = dataRect.height < textSize.height;
+                                        isOutside = !context.valueCentered() || noRoomInside;
+
+                                        pos.x = dataRect.x + (dataRect.width / 2);
+
+                                        if (isOutside) {
+                                            if (isPositive) {
+                                                noRoomOnExpectedSide = topSpace < textSize.height + padding;
+                                                if (noRoomOnExpectedSide) {
+                                                    if (!noRoomInside) {
+                                                        isOutside = false;
+                                                        pos.y = dataRect.y + (dataRect.height / 2);
+                                                    } else {
+                                                        pos.y = dataRect.y + dataRect.height + textSize.height;
+                                                    }
+                                                } else {
+                                                    pos.y = dataRect.y - (textSize.height / 2) - padding;
+                                                }
+                                            } else {
+                                                noRoomOnExpectedSide = bottomSpace < textSize.height;
+                                                if (noRoomOnExpectedSide) {
+                                                    if (!noRoomInside) {
+                                                        isOutside = false;
+                                                        pos.y = dataRect.y + (dataRect.height / 2);
+                                                    } else {
+                                                        pos.y = dataRect.y - (textSize.height / 2) - padding;
+                                                    }
+                                                } else {
+                                                    pos.y = dataRect.y + textSize.height + padding;
+                                                }
+                                            }
+                                        } else {
+                                            pos.y = dataRect.y + (dataRect.height / 2);
+                                        }
+                                    } else { // Bar
+                                        noRoomInside = dataRect.width < textSize.width;
+                                        isOutside = !context.valueCentered() || noRoomInside;
+
+                                        pos.y = dataRect.y + (dataRect.height / 2);
+
+                                        if (isOutside) {
+                                            if (isPositive) {
+                                                noRoomOnExpectedSide = rightSpace < textSize.width + padding;
+                                                if (noRoomOnExpectedSide) {
+                                                    if (context.showInnerText() || !noRoomInside) {
+                                                        isOutside = false;
+                                                        pos.x = dataRect.x + (dataRect.width / 2);
+                                                    } else {
+                                                        pos.x = dataRect.x - (textSize.width - padding);
+                                                    }
+                                                } else {
+                                                    pos.x = dataRect.x + dataRect.width + (textSize.width / 2) + padding;
+                                                }
+                                            } else {
+                                                noRoomOnExpectedSide = leftSpace < textSize.width;
+                                                if (noRoomOnExpectedSide) {
+                                                    if (context.showInnerText() || !noRoomInside) {
+                                                        isOutside = false;
+                                                        pos.x = dataRect.x + (dataRect.width / 2);
+                                                    } else {
+                                                        pos.x = dataRect.x + dataRect.width + (textSize.width - padding);
+                                                    }
+                                                } else {
+                                                    pos.x = dataRect.x - (textSize.width - padding);
+                                                }
+                                            }
+                                        } else {
+                                            pos.x = dataRect.x + (dataRect.width / 2);
+                                        }
+                                    }
+                                }
+                                const textColor = isOutside ? null : context.textColor(d.row, d.column, d.value, d.origRow);
+
+                                //  Prevent overlapping labels on stacked columns
+                                const columns = context.columns();
+                                const hideValue = (context.yAxisStacked() && noRoomInside) ||
+                                    (isOutside && context.yAxisStacked() && columns.indexOf(d.column) !== columns.length - 1);
+                                context.textLocal.get(this)
+                                    .pos(pos)
+                                    .anchor(valueAnchor)
+                                    .fontFamily(valueFontFamily)
+                                    .fontSize(valueFontSize)
+                                    .text(`${valueText}`)
+                                    .colorFill(textColor)
+                                    .visible(context.showValue() && !hideValue)
+                                    .render()
+                                    ;
+
+                            });
+                        dataText.exit()
+                            .each(function (this: SVGElement, d) {
+                                context.textLocal.get(this).target(null);
+                            })
+                            .remove()
+                            ;
+                    });
+                columnGRect.exit().transition().duration(duration)
+                    .style("opacity", 0)
+                    .remove()
+                    ;
+
+                const value4pos = host.yAxisStacked() ? domainSums[dataRowIdx] : Math.max(...dataRow.filter((_, idx) => idx > 0 && idx < columnLength));
+                const stackedTotalText = element.selectAll(".stackedTotalText").data(context.showDomainTotal() ? [domainSums[dataRowIdx]] : []);
+                const stackedTotalTextEnter = stackedTotalText.enter().append("g")
+                    .attr("class", "stackedTotalText")
+                    .each(function (this: SVGElement, d) {
+                        context.stackedTextLocal.set(this, new Text().target(this).colorStroke_default("transparent"));
+                    });
+                stackedTotalTextEnter.merge(stackedTotalText as any)
+                    .each(function (this: SVGElement, d: any) {
+                        const pos = { x: 0, y: 0 };
+                        const domainPos = host.dataPos(dataRow[0]);
+                        const valuePos = host.valuePos(value4pos);
+
+                        const valueFontFamily = context.valueFontFamily();
+                        const valueFontSize = context.valueFontSize();
+                        const textSize = context.textSize(d, valueFontFamily, valueFontSize);
+
+                        const isPositive = parseFloat(d) >= 0;
+                        let valueAnchor: "start" | "middle" | "end" = "middle";
+                        if (isHorizontal) {
+                            pos.x = domainPos;
+                            if (isPositive) {
+                                pos.y = valuePos - textSize.height / 2;
+                            } else {
+                                pos.y = valuePos + textSize.height / 2;
+                            }
+                        } else {
+                            valueAnchor = "start";
+                            pos.y = domainPos;
+                            if (isPositive) {
+                                pos.x = valuePos + textSize.width / 2;
+                            } else {
+                                pos.x = valuePos - textSize.width / 2;
+                            }
+                        }
+
+                        context.stackedTextLocal.get(this)
+                            .pos(pos)
+                            .anchor(valueAnchor)
+                            .fontFamily(valueFontFamily)
+                            .fontSize(valueFontSize)
+                            .text(d)
+                            .render()
+                            ;
+
+                    });
+                stackedTotalText.exit()
+                    .each(function (this: SVGElement, d) {
+                        context.textLocal.get(this).target(null);
+                    })
+                    .remove()
+                    ;
+            });
+        column.exit().transition().duration(duration)
+            .remove()
+            ;
+    }
+
+    calcInnerText(offset, innerText, valueText) {
+        const fontFamily = this.innerTextFontFamily_exists() ? this.innerTextFontFamily() : "Verdana";
+        const fontSize = this.innerTextFontSize();
+        const valueFontFamily = this.valueFontFamily_exists() ? this.valueFontFamily() : "Verdana";
+        const valueFontSize = this.valueFontSize();
+        const padding = this.innerTextPadding_exists() ? this.innerTextPadding() : fontSize / 2.5;
+        const valueTextWidth = this.isHorizontal ? valueFontSize : this.textSize(valueText, valueFontFamily, valueFontSize).width;
+        const ellipsisWidth = this.textSize("...", fontFamily, fontSize).width;
+        const innerTextWidth = this.textSize(innerText, fontFamily, fontSize).width;
+        const origInnerText = innerText;
+
+        const fullWidth = (padding * 3) + innerTextWidth + valueTextWidth;
+        const fullWidth2 = (padding * 3) + ellipsisWidth + valueTextWidth;
+        const fullWidth3 = (padding * 1) + valueTextWidth;
+        /*
+        Categories:
+            1) room to display inner text (with padding) AND value text (with padding)
+            2) room to display ellipsis (with padding) AND value text (with padding)
+            3) room to display value text only (with padding)
+            4) no room to display any text except value on the outside
+        */
+        let category = 4;
+        if (fullWidth < offset) {
+            category = 1;
+        } else if (fullWidth2 < offset) {
+            const excessWidth = offset - fullWidth2;
+            let _text = "";
+            for (const letter of innerText) {
+                if (this.textSize(_text + letter, fontFamily, fontSize).width > excessWidth) {
+                    innerText = _text + "...";
+                    break;
+                } else {
+                    _text += letter;
+                }
+            }
+            category = 2;
+        } else if (fullWidth3 < offset) {
+            innerText = "";
+            category = 3;
+        } else {
+            innerText = "";
+        }
+
+        return {
+            text: innerText,
+            isTruncated: origInnerText !== innerText,
+            padding,
+            category,
+            valueTextWidth
+        };
+    }
+
+    innerText(origRow, lparam, idx): string {
+        return origRow[0];
+    }
+}
+Column.prototype._class += " chart_Column";
+Column.prototype.implements(INDChart.prototype);
+Column.prototype.implements(ITooltip.prototype);
+
+export interface Column {
+    paletteID(): string;
+    paletteID(_: string): this;
+    useClonedPalette(): boolean;
+    useClonedPalette(_: boolean): this;
+    showValue(): boolean;
+    showValue(_: boolean): this;
+    showInnerText(): boolean;
+    showInnerText(_: boolean): this;
+    showValueFormat(): string;
+    showValueFormat(_: string): this;
+    showValueAsPercent(): null | "series" | "domain";
+    showValueAsPercent(_: null | "series" | "domain"): this;
+    showValueAsPercentFormat(): string;
+    showValueAsPercentFormat(_: string): this;
+    showDomainTotal(): boolean;
+    showDomainTotal(_: boolean): this;
+    valueCentered(): boolean;
+    valueCentered(_: boolean): this;
+    valueAnchor(): "start" | "middle" | "end";
+    valueAnchor(_: "start" | "middle" | "end"): this;
+    valueFontFamily(): string;
+    valueFontFamily(_: string): this;
+    valueFontFamily_exists(): boolean;
+    valueFontSize(): number;
+    valueFontSize(_: number): this;
+    xAxisSeriesPaddingInner(): number;
+    xAxisSeriesPaddingInner(_: number): this;
+    innerTextFontFamily(): string;
+    innerTextFontFamily(_: string): this;
+    innerTextFontFamily_exists(): boolean;
+    innerTextFontSize(): number;
+    innerTextFontSize(_: number): this;
+    innerTextPadding(): number;
+    innerTextPadding(_: number): this;
+    innerTextPadding_exists(): boolean;
+    tooltipInnerTextEllipsedOnly(): boolean;
+    tooltipInnerTextEllipsedOnly(_: boolean): this;
+
+    //  INDChart  ---
+    fillColor(row, column, value, origRow): string;
+    textColor(row, column, value, origRow): string;
+    dblclick(row, column, selected): void;
+
+    //  ITooltip  ---
+    tooltip;
+    tooltipHTML(_): string;
+    tooltipFormat(_): string;
+    tooltipStyle(): "default" | "none" | "series-table";
+    tooltipStyle(_: "default" | "none" | "series-table"): this;
+}
+
+Column.prototype.publish("valueFontFamily", null, "string", "Font family of value text", null, { optional: true });
+Column.prototype.publish("valueFontSize", 12, "number", "Height of value text (pixels)");
+Column.prototype.publish("innerTextFontFamily", null, "string", "Font family of inner text", null, { optional: true });
+Column.prototype.publish("innerTextPadding", 8, "number", "Offset of inner text (pixels)", null, { optional: true });
+Column.prototype.publish("innerTextFontSize", 12, "number", "Height of inner text (pixels)");
+Column.prototype.publish("paletteID", "default", "set", "Color palette for this widget", () => Column.prototype._palette.switch(), { tags: ["Basic", "Shared"] });
+Column.prototype.publish("useClonedPalette", false, "boolean", "Enable or disable using a cloned palette", null, { tags: ["Intermediate", "Shared"] });
+Column.prototype.publish("showValue", false, "boolean", "Show Value in column");
+Column.prototype.publish("showInnerText", false, "boolean", "Show Label in column");
+Column.prototype.publish("showValueFormat", ",", "string", "D3 Format for Value", null, { disable: (w: Column) => !w.showValue() || !!w.showValueAsPercent() });
+Column.prototype.publish("showValueAsPercent", null, "set", "If showValue is true, optionally show value as a percentage by Series or Domain", [null, "series", "domain"], { disable: w => !w.showValue(), optional: true });
+Column.prototype.publish("showValueAsPercentFormat", ".0%", "string", "D3 Format for %", null, { disable: (w: Column) => !w.showValue() || !w.showValueAsPercent() });
+Column.prototype.publish("showDomainTotal", false, "boolean", "Show Total Value for Stacked Columns", null);
+Column.prototype.publish("valueCentered", false, "boolean", "Show Value in center of column");
+Column.prototype.publish("valueAnchor", "middle", "set", "text-anchor for shown value text", ["start", "middle", "end"]);
+Column.prototype.publish("xAxisSeriesPaddingInner", 0.0, "number", "Determines the ratio of the range that is reserved for blank space between band (0->1)");
+Column.prototype.publish("tooltipInnerTextEllipsedOnly", false, "boolean", "Show tooltip only when inner text is truncated with an ellipsis");
+
+/*
+const origUseClonedPalette = Column.prototype.useClonedPalette;
+Column.prototype.useClonedPalette = function (this: Column, _?) {
+    const retVal = origUseClonedPalette.apply(this, arguments);
+    if (arguments.length) {
+        this._useClonedPalette = _;
+    }
+    return retVal;;
+}
+*/