@geoblocks/elevation-profile 0.0.4 → 0.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/elevation-profile.d.ts.map +1 -1
- package/dist/elevation-profile.js +24 -16
- package/dist/elevation-profile.js.map +1 -1
- package/package.json +1 -1
- package/dist/index.600fa9d1.js +0 -5245
- package/dist/index.600fa9d1.js.map +0 -1
- package/dist/index.html +0 -574
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";
|
|
1
|
+
{"mappings":";AAaA,6BAC8B,SAAQ,UAAU;IACrB,KAAK,EAAE,MAAM,EAAE,EAAE,CAAM;IACtB,MAAM;;;;;MAA8C;IACpD,QAAQ;;;MAAmB;IAE5C,OAAO;;;MAAgB;IA8BvB,UAAU,CAAC,iBAAiB,EAAE,cAAc;IAa5C,MAAM;IAkEN,YAAY;IA2CZ,gBAAgB;CAG1B;AAGD,QAAQ,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,gBAAgB,CAAC;KACvC;CACF","sources":["elevation-profile.ts"],"sourcesContent":["import {LitElement, svg} from 'lit';\nimport {customElement, state, property} from 'lit/decorators.js';\nimport {ResizeController} from '@lit-labs/observers/resize-controller.js';\nimport type {PropertyValues} from 'lit';\n\nimport {extent, bisector} from 'd3-array';\nimport {scaleLinear} from 'd3-scale';\nimport {line, area} from 'd3-shape';\nimport {axisBottom, axisLeft} from 'd3-axis';\nimport {select, pointer} from 'd3-selection';\n\ntype PlotPoint = number[];\n\n@customElement('elevation-profile')\nexport class ElevationProfile extends LitElement {\n @property({type: Array}) lines: number[][] = [];\n @property({type: Object}) margin = {top: 20, right: 20, bottom: 20, left: 40};\n @property({type: Object}) tickSize = {x: 100, y: 40};\n\n @state() pointer = {x: 0, y: 0};\n private _resizeController = new ResizeController(this, {});\n\n private plotData: PlotPoint[] = [];\n private scaleX = scaleLinear();\n private scaleY = scaleLinear();\n\n private bisectDistance = bisector((point: PlotPoint) => point[0]);\n\n private line = line()\n .x((point: PlotPoint) => this.scaleX(point[0]))\n .y((point: PlotPoint) => this.scaleY(point[1]));\n private area = area()\n .x((point: PlotPoint) => this.scaleX(point[0]))\n .y1((point: PlotPoint) => this.scaleY(point[1]));\n private xAxis = axisBottom(this.scaleX).tickFormat((value: number) => this.tickFormat(value));\n private yAxis = axisLeft(this.scaleY).tickFormat((value: number) => this.tickFormat(value));\n private xGrid = axisBottom(this.scaleX).tickFormat(() => '');\n private yGrid = axisLeft(this.scaleY).tickFormat(() => '');\n\n private meterFormat = Intl.NumberFormat('de-CH', {\n style: 'unit',\n unit: 'meter',\n });\n\n private kilometerFormat = Intl.NumberFormat('de-CH', {\n style: 'unit',\n unit: 'kilometer',\n });\n\n override willUpdate(changedProperties: PropertyValues) {\n if (changedProperties.has('lines')) {\n this.plotData = this.lines.map((coordinate) => [coordinate[3], coordinate[2]]);\n\n this.scaleX.domain(extent(this.plotData, (data: PlotPoint) => data[0]));\n this.scaleY.domain(extent(this.plotData, (data: PlotPoint) => data[1])).nice();\n }\n }\n\n // override shouldUpdate(): boolean {\n // return this.lines.length > 0;\n // }\n\n override render() {\n const width = this.offsetWidth;\n const height = this.offsetHeight;\n\n this.scaleX.range([this.margin.left, width - this.margin.right]);\n this.scaleY.range([height - this.margin.bottom, this.margin.top]);\n\n this.area.y0(height - this.margin.bottom);\n\n this.yGrid.tickSize(-width + this.margin.left + this.margin.right);\n this.xGrid.tickSize(height - this.margin.top - this.margin.bottom);\n\n const xTicks = width / this.tickSize.x;\n const yTicks = height / this.tickSize.y;\n this.xAxis.ticks(xTicks);\n this.xGrid.ticks(xTicks);\n this.yAxis.ticks(yTicks);\n this.yGrid.ticks(yTicks);\n\n select(this.querySelector('.axis.x')).call(this.xAxis);\n select(this.querySelector('.axis.y')).call(this.yAxis);\n select(this.querySelector('.grid.x')).call(this.xGrid);\n select(this.querySelector('.grid.y')).call(this.yGrid);\n\n return svg`\n <svg width=\"${width}\" height=\"${height}\" xmlns=\"http://www.w3.org/2000/svg\">\n <g class=\"grid y\" transform=\"translate(${this.margin.left}, 0)\" />\n <g class=\"grid x\" transform=\"translate(0, ${this.margin.bottom})\" />\n <g class=\"axis x\" transform=\"translate(0, ${height - this.margin.bottom})\" />\n <g class=\"axis y\" transform=\"translate(${this.margin.left}, 0)\" />\n <path class=\"area\" d=\"${this.area(this.plotData)}\" />\n <path class=\"elevation\" d=\"${this.line(this.plotData)}\" fill=\"none\" />\n <g style=\"visibility: ${this.pointer.x > 0 ? 'visible' : 'hidden'}\">\n <path class=\"elevation highlight\" d=\"${this.line(this.plotData)}\" fill=\"none\"\n clip-path=\"polygon(0 0, ${this.pointer.x - this.margin.left} 0, ${this.pointer.x - this.margin.left} 100%, 0 100%)\"\n />\n <line\n class=\"pointer-line y\"\n x1=\"${this.pointer.x}\"\n y1=\"${this.margin.top}\"\n x2=\"${this.pointer.x}\"\n y2=\"${height - this.margin.bottom}\"\n />\n <circle class=\"pointer-circle\" cx=\"${this.pointer.x}\" cy=\"${this.pointer.y}\" />\n </g>\n <rect\n width=\"${width}\"\n height=\"${height}\"\n fill=\"none\"\n pointer-events=\"all\"\n style=\"touch-action: none;\"\n @pointermove=\"${this.pointerMove}\"\n @pointerout=\"${this.pointerOut}\"\n />\n </svg>\n `;\n }\n\n private tickFormat(value: number) {\n if (value < 1000) {\n return this.meterFormat.format(value);\n } else {\n return this.kilometerFormat.format(value / 1000);\n }\n }\n\n override firstUpdated() {\n // FIXME: because the ref element are used before render is done, we need to force an update\n this.requestUpdate();\n }\n\n private pointerMove(event: PointerEvent) {\n const pointerDistance = this.scaleX.invert(pointer(event)[0]);\n const index = Math.min(this.bisectDistance.left(this.plotData, pointerDistance), this.plotData.length - 1);\n\n if (index < 0) {\n return;\n }\n // FIXME:\n // var d0 = data[i - 1]\n // var d1 = data[i];\n // // work out which date value is closest to the mouse\n // var d = mouseDate - d0[0] > d1[0] - mouseDate ? d1 : d0;\n\n const data = this.plotData[index];\n\n this.pointer = {\n x: this.scaleX(data[0]),\n y: this.scaleY(data[1]),\n };\n\n this.dispatchEvent(\n new CustomEvent('over', {\n detail: {\n coordinate: this.lines[index],\n position: this.pointer\n }\n }),\n );\n }\n\n private pointerOut() {\n this.pointer = {\n x: 0,\n y: 0,\n };\n this.dispatchEvent(new CustomEvent('out'));\n }\n\n override createRenderRoot() {\n return this;\n }\n}\n\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'elevation-profile': ElevationProfile;\n }\n}\n"],"names":[],"version":3,"file":"elevation-profile.d.ts.map"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import {svg as $agntW$svg, LitElement as $agntW$LitElement} from "lit";
|
|
2
2
|
import {property as $agntW$property, state as $agntW$state, customElement as $agntW$customElement} from "lit/decorators.js";
|
|
3
3
|
import {ResizeController as $agntW$ResizeController} from "@lit-labs/observers/resize-controller.js";
|
|
4
|
-
import {createRef as $agntW$createRef, ref as $agntW$ref} from "lit/directives/ref.js";
|
|
5
4
|
import {bisector as $agntW$bisector, extent as $agntW$extent} from "d3-array";
|
|
6
5
|
import {scaleLinear as $agntW$scaleLinear} from "d3-scale";
|
|
7
6
|
import {line as $agntW$line, area as $agntW$area} from "d3-shape";
|
|
@@ -16,7 +15,6 @@ import {select as $agntW$select, pointer as $agntW$pointer} from "d3-selection";
|
|
|
16
15
|
|
|
17
16
|
|
|
18
17
|
|
|
19
|
-
|
|
20
18
|
var $916babf1e6dc2c08$var$__decorate = undefined && undefined.__decorate || function(decorators, target, key, desc) {
|
|
21
19
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
22
20
|
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
@@ -48,14 +46,18 @@ let $916babf1e6dc2c08$export$14ab3917b98d786a = class ElevationProfile extends (
|
|
|
48
46
|
this.bisectDistance = (0, $agntW$bisector)((point)=>point[0]);
|
|
49
47
|
this.line = (0, $agntW$line)().x((point)=>this.scaleX(point[0])).y((point)=>this.scaleY(point[1]));
|
|
50
48
|
this.area = (0, $agntW$area)().x((point)=>this.scaleX(point[0])).y1((point)=>this.scaleY(point[1]));
|
|
51
|
-
this.xAxis = (0, $agntW$axisBottom)(this.scaleX).tickFormat((
|
|
52
|
-
this.yAxis = (0, $agntW$axisLeft)(this.scaleY).tickFormat((
|
|
49
|
+
this.xAxis = (0, $agntW$axisBottom)(this.scaleX).tickFormat((value)=>this.tickFormat(value));
|
|
50
|
+
this.yAxis = (0, $agntW$axisLeft)(this.scaleY).tickFormat((value)=>this.tickFormat(value));
|
|
53
51
|
this.xGrid = (0, $agntW$axisBottom)(this.scaleX).tickFormat(()=>"");
|
|
54
52
|
this.yGrid = (0, $agntW$axisLeft)(this.scaleY).tickFormat(()=>"");
|
|
55
|
-
this.
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
53
|
+
this.meterFormat = Intl.NumberFormat("de-CH", {
|
|
54
|
+
style: "unit",
|
|
55
|
+
unit: "meter"
|
|
56
|
+
});
|
|
57
|
+
this.kilometerFormat = Intl.NumberFormat("de-CH", {
|
|
58
|
+
style: "unit",
|
|
59
|
+
unit: "kilometer"
|
|
60
|
+
});
|
|
59
61
|
}
|
|
60
62
|
willUpdate(changedProperties) {
|
|
61
63
|
if (changedProperties.has("lines")) {
|
|
@@ -90,16 +92,16 @@ let $916babf1e6dc2c08$export$14ab3917b98d786a = class ElevationProfile extends (
|
|
|
90
92
|
this.xGrid.ticks(xTicks);
|
|
91
93
|
this.yAxis.ticks(yTicks);
|
|
92
94
|
this.yGrid.ticks(yTicks);
|
|
93
|
-
(0, $agntW$select)(this.
|
|
94
|
-
(0, $agntW$select)(this.
|
|
95
|
-
(0, $agntW$select)(this.
|
|
96
|
-
(0, $agntW$select)(this.
|
|
95
|
+
(0, $agntW$select)(this.querySelector(".axis.x")).call(this.xAxis);
|
|
96
|
+
(0, $agntW$select)(this.querySelector(".axis.y")).call(this.yAxis);
|
|
97
|
+
(0, $agntW$select)(this.querySelector(".grid.x")).call(this.xGrid);
|
|
98
|
+
(0, $agntW$select)(this.querySelector(".grid.y")).call(this.yGrid);
|
|
97
99
|
return (0, $agntW$svg)`
|
|
98
100
|
<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
|
|
99
|
-
<g class="grid y"
|
|
100
|
-
<g class="grid x"
|
|
101
|
-
<g class="axis x"
|
|
102
|
-
<g class="axis y"
|
|
101
|
+
<g class="grid y" transform="translate(${this.margin.left}, 0)" />
|
|
102
|
+
<g class="grid x" transform="translate(0, ${this.margin.bottom})" />
|
|
103
|
+
<g class="axis x" transform="translate(0, ${height - this.margin.bottom})" />
|
|
104
|
+
<g class="axis y" transform="translate(${this.margin.left}, 0)" />
|
|
103
105
|
<path class="area" d="${this.area(this.plotData)}" />
|
|
104
106
|
<path class="elevation" d="${this.line(this.plotData)}" fill="none" />
|
|
105
107
|
<g style="visibility: ${this.pointer.x > 0 ? "visible" : "hidden"}">
|
|
@@ -120,12 +122,17 @@ let $916babf1e6dc2c08$export$14ab3917b98d786a = class ElevationProfile extends (
|
|
|
120
122
|
height="${height}"
|
|
121
123
|
fill="none"
|
|
122
124
|
pointer-events="all"
|
|
125
|
+
style="touch-action: none;"
|
|
123
126
|
@pointermove="${this.pointerMove}"
|
|
124
127
|
@pointerout="${this.pointerOut}"
|
|
125
128
|
/>
|
|
126
129
|
</svg>
|
|
127
130
|
`;
|
|
128
131
|
}
|
|
132
|
+
tickFormat(value) {
|
|
133
|
+
if (value < 1000) return this.meterFormat.format(value);
|
|
134
|
+
else return this.kilometerFormat.format(value / 1000);
|
|
135
|
+
}
|
|
129
136
|
firstUpdated() {
|
|
130
137
|
// FIXME: because the ref element are used before render is done, we need to force an update
|
|
131
138
|
this.requestUpdate();
|
|
@@ -133,6 +140,7 @@ let $916babf1e6dc2c08$export$14ab3917b98d786a = class ElevationProfile extends (
|
|
|
133
140
|
pointerMove(event) {
|
|
134
141
|
const pointerDistance = this.scaleX.invert((0, $agntW$pointer)(event)[0]);
|
|
135
142
|
const index = Math.min(this.bisectDistance.left(this.plotData, pointerDistance), this.plotData.length - 1);
|
|
143
|
+
if (index < 0) return;
|
|
136
144
|
// FIXME:
|
|
137
145
|
// var d0 = data[i - 1]
|
|
138
146
|
// var d1 = data[i];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["elevation-profile.ts"],"sourcesContent":["import {LitElement, svg} from 'lit';\nimport {customElement, state, property} from 'lit/decorators.js';\nimport {ResizeController} from '@lit-labs/observers/resize-controller.js';\nimport {createRef, ref} from 'lit/directives/ref.js';\nimport type {PropertyValues} from 'lit';\n\nimport {extent, bisector} from 'd3-array';\nimport {scaleLinear} from 'd3-scale';\nimport {line, area} from 'd3-shape';\nimport {axisBottom, axisLeft} from 'd3-axis';\nimport {select, pointer} from 'd3-selection';\n\ntype PlotPoint = number[];\n\n@customElement('elevation-profile')\nexport class ElevationProfile extends LitElement {\n @property({type: Array}) lines: number[][] = [];\n @property({type: Object}) margin = {top: 20, right: 20, bottom: 20, left: 40};\n @property({type: Object}) tickSize = {x: 100, y: 40};\n\n @state() pointer = {x: 0, y: 0};\n private _resizeController = new ResizeController(this, {});\n\n private plotData: PlotPoint[] = [];\n private scaleX = scaleLinear();\n private scaleY = scaleLinear();\n\n private bisectDistance = bisector((point: PlotPoint) => point[0]);\n\n private line = line()\n .x((point: PlotPoint) => this.scaleX(point[0]))\n .y((point: PlotPoint) => this.scaleY(point[1]));\n private area = area()\n .x((point: PlotPoint) => this.scaleX(point[0]))\n .y1((point: PlotPoint) => this.scaleY(point[1]));\n private xAxis = axisBottom(this.scaleX)\n .tickFormat((val: number) => `${val} m`);\n private yAxis = axisLeft(this.scaleY)\n .tickFormat((val: number) => `${val} m`);\n private xGrid = axisBottom(this.scaleX).tickFormat(() => '');\n private yGrid = axisLeft(this.scaleY).tickFormat(() => '');\n\n private xRef = createRef();\n private yRef = createRef();\n private yGridRef = createRef();\n private xGridRef = createRef();\n\n override willUpdate(changedProperties: PropertyValues) {\n if (changedProperties.has('lines')) {\n this.plotData = this.lines.map((coordinate) => [coordinate[3], coordinate[2]]);\n\n this.scaleX.domain(extent(this.plotData, (data: PlotPoint) => data[0]));\n this.scaleY.domain(extent(this.plotData, (data: PlotPoint) => data[1])).nice();\n }\n }\n\n // override shouldUpdate(): boolean {\n // return this.lines.length > 0;\n // }\n\n override render() {\n const width = this.offsetWidth;\n const height = this.offsetHeight;\n\n this.scaleX.range([this.margin.left, width - this.margin.right]);\n this.scaleY.range([height - this.margin.bottom, this.margin.top]);\n\n this.area.y0(height - this.margin.bottom);\n\n this.yGrid.tickSize(-width + this.margin.left + this.margin.right);\n this.xGrid.tickSize(height - this.margin.top - this.margin.bottom);\n\n const xTicks = width / this.tickSize.x;\n const yTicks = height / this.tickSize.y;\n this.xAxis.ticks(xTicks);\n this.xGrid.ticks(xTicks);\n this.yAxis.ticks(yTicks);\n this.yGrid.ticks(yTicks);\n\n select(this.xRef.value).call(this.xAxis);\n select(this.yRef.value).call(this.yAxis);\n select(this.xGridRef.value).call(this.xGrid);\n select(this.yGridRef.value).call(this.yGrid);\n\n return svg`\n <svg width=\"${width}\" height=\"${height}\" xmlns=\"http://www.w3.org/2000/svg\">\n <g class=\"grid y\" ${ref(this.yGridRef)} transform=\"translate(${this.margin.left}, 0)\" />\n <g class=\"grid x\" ${ref(this.xGridRef)} transform=\"translate(0, ${this.margin.bottom})\" />\n <g class=\"axis x\" ${ref(this.xRef)} transform=\"translate(0, ${height - this.margin.bottom})\" />\n <g class=\"axis y\" ${ref(this.yRef)} transform=\"translate(${this.margin.left}, 0)\" />\n <path class=\"area\" d=\"${this.area(this.plotData)}\" />\n <path class=\"elevation\" d=\"${this.line(this.plotData)}\" fill=\"none\" />\n <g style=\"visibility: ${this.pointer.x > 0 ? 'visible' : 'hidden'}\">\n <path class=\"elevation highlight\" d=\"${this.line(this.plotData)}\" fill=\"none\"\n clip-path=\"polygon(0 0, ${this.pointer.x - this.margin.left} 0, ${this.pointer.x - this.margin.left} 100%, 0 100%)\"\n />\n <line\n class=\"pointer-line y\"\n x1=\"${this.pointer.x}\"\n y1=\"${this.margin.top}\"\n x2=\"${this.pointer.x}\"\n y2=\"${height - this.margin.bottom}\"\n />\n <circle class=\"pointer-circle\" cx=\"${this.pointer.x}\" cy=\"${this.pointer.y}\" />\n </g>\n <rect\n width=\"${width}\"\n height=\"${height}\"\n fill=\"none\"\n pointer-events=\"all\"\n @pointermove=\"${this.pointerMove}\"\n @pointerout=\"${this.pointerOut}\"\n />\n </svg>\n `;\n }\n\n override firstUpdated() {\n // FIXME: because the ref element are used before render is done, we need to force an update\n this.requestUpdate();\n }\n\n private pointerMove(event: PointerEvent) {\n const pointerDistance = this.scaleX.invert(pointer(event)[0]);\n const index = Math.min(this.bisectDistance.left(this.plotData, pointerDistance), this.plotData.length - 1);\n // FIXME:\n // var d0 = data[i - 1]\n // var d1 = data[i];\n // // work out which date value is closest to the mouse\n // var d = mouseDate - d0[0] > d1[0] - mouseDate ? d1 : d0;\n\n const data = this.plotData[index];\n\n this.pointer = {\n x: this.scaleX(data[0]),\n y: this.scaleY(data[1]),\n };\n\n this.dispatchEvent(\n new CustomEvent('over', {\n detail: {\n coordinate: this.lines[index],\n position: this.pointer\n }\n }),\n );\n }\n\n private pointerOut() {\n this.pointer = {\n x: 0,\n y: 0,\n };\n this.dispatchEvent(new CustomEvent('out'));\n }\n\n override createRenderRoot() {\n return this;\n }\n}\n\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'elevation-profile': ElevationProfile;\n }\n}\n"],"names":[],"version":3,"file":"elevation-profile.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["elevation-profile.ts"],"sourcesContent":["import {LitElement, svg} from 'lit';\nimport {customElement, state, property} from 'lit/decorators.js';\nimport {ResizeController} from '@lit-labs/observers/resize-controller.js';\nimport type {PropertyValues} from 'lit';\n\nimport {extent, bisector} from 'd3-array';\nimport {scaleLinear} from 'd3-scale';\nimport {line, area} from 'd3-shape';\nimport {axisBottom, axisLeft} from 'd3-axis';\nimport {select, pointer} from 'd3-selection';\n\ntype PlotPoint = number[];\n\n@customElement('elevation-profile')\nexport class ElevationProfile extends LitElement {\n @property({type: Array}) lines: number[][] = [];\n @property({type: Object}) margin = {top: 20, right: 20, bottom: 20, left: 40};\n @property({type: Object}) tickSize = {x: 100, y: 40};\n\n @state() pointer = {x: 0, y: 0};\n private _resizeController = new ResizeController(this, {});\n\n private plotData: PlotPoint[] = [];\n private scaleX = scaleLinear();\n private scaleY = scaleLinear();\n\n private bisectDistance = bisector((point: PlotPoint) => point[0]);\n\n private line = line()\n .x((point: PlotPoint) => this.scaleX(point[0]))\n .y((point: PlotPoint) => this.scaleY(point[1]));\n private area = area()\n .x((point: PlotPoint) => this.scaleX(point[0]))\n .y1((point: PlotPoint) => this.scaleY(point[1]));\n private xAxis = axisBottom(this.scaleX).tickFormat((value: number) => this.tickFormat(value));\n private yAxis = axisLeft(this.scaleY).tickFormat((value: number) => this.tickFormat(value));\n private xGrid = axisBottom(this.scaleX).tickFormat(() => '');\n private yGrid = axisLeft(this.scaleY).tickFormat(() => '');\n\n private meterFormat = Intl.NumberFormat('de-CH', {\n style: 'unit',\n unit: 'meter',\n });\n\n private kilometerFormat = Intl.NumberFormat('de-CH', {\n style: 'unit',\n unit: 'kilometer',\n });\n\n override willUpdate(changedProperties: PropertyValues) {\n if (changedProperties.has('lines')) {\n this.plotData = this.lines.map((coordinate) => [coordinate[3], coordinate[2]]);\n\n this.scaleX.domain(extent(this.plotData, (data: PlotPoint) => data[0]));\n this.scaleY.domain(extent(this.plotData, (data: PlotPoint) => data[1])).nice();\n }\n }\n\n // override shouldUpdate(): boolean {\n // return this.lines.length > 0;\n // }\n\n override render() {\n const width = this.offsetWidth;\n const height = this.offsetHeight;\n\n this.scaleX.range([this.margin.left, width - this.margin.right]);\n this.scaleY.range([height - this.margin.bottom, this.margin.top]);\n\n this.area.y0(height - this.margin.bottom);\n\n this.yGrid.tickSize(-width + this.margin.left + this.margin.right);\n this.xGrid.tickSize(height - this.margin.top - this.margin.bottom);\n\n const xTicks = width / this.tickSize.x;\n const yTicks = height / this.tickSize.y;\n this.xAxis.ticks(xTicks);\n this.xGrid.ticks(xTicks);\n this.yAxis.ticks(yTicks);\n this.yGrid.ticks(yTicks);\n\n select(this.querySelector('.axis.x')).call(this.xAxis);\n select(this.querySelector('.axis.y')).call(this.yAxis);\n select(this.querySelector('.grid.x')).call(this.xGrid);\n select(this.querySelector('.grid.y')).call(this.yGrid);\n\n return svg`\n <svg width=\"${width}\" height=\"${height}\" xmlns=\"http://www.w3.org/2000/svg\">\n <g class=\"grid y\" transform=\"translate(${this.margin.left}, 0)\" />\n <g class=\"grid x\" transform=\"translate(0, ${this.margin.bottom})\" />\n <g class=\"axis x\" transform=\"translate(0, ${height - this.margin.bottom})\" />\n <g class=\"axis y\" transform=\"translate(${this.margin.left}, 0)\" />\n <path class=\"area\" d=\"${this.area(this.plotData)}\" />\n <path class=\"elevation\" d=\"${this.line(this.plotData)}\" fill=\"none\" />\n <g style=\"visibility: ${this.pointer.x > 0 ? 'visible' : 'hidden'}\">\n <path class=\"elevation highlight\" d=\"${this.line(this.plotData)}\" fill=\"none\"\n clip-path=\"polygon(0 0, ${this.pointer.x - this.margin.left} 0, ${this.pointer.x - this.margin.left} 100%, 0 100%)\"\n />\n <line\n class=\"pointer-line y\"\n x1=\"${this.pointer.x}\"\n y1=\"${this.margin.top}\"\n x2=\"${this.pointer.x}\"\n y2=\"${height - this.margin.bottom}\"\n />\n <circle class=\"pointer-circle\" cx=\"${this.pointer.x}\" cy=\"${this.pointer.y}\" />\n </g>\n <rect\n width=\"${width}\"\n height=\"${height}\"\n fill=\"none\"\n pointer-events=\"all\"\n style=\"touch-action: none;\"\n @pointermove=\"${this.pointerMove}\"\n @pointerout=\"${this.pointerOut}\"\n />\n </svg>\n `;\n }\n\n private tickFormat(value: number) {\n if (value < 1000) {\n return this.meterFormat.format(value);\n } else {\n return this.kilometerFormat.format(value / 1000);\n }\n }\n\n override firstUpdated() {\n // FIXME: because the ref element are used before render is done, we need to force an update\n this.requestUpdate();\n }\n\n private pointerMove(event: PointerEvent) {\n const pointerDistance = this.scaleX.invert(pointer(event)[0]);\n const index = Math.min(this.bisectDistance.left(this.plotData, pointerDistance), this.plotData.length - 1);\n\n if (index < 0) {\n return;\n }\n // FIXME:\n // var d0 = data[i - 1]\n // var d1 = data[i];\n // // work out which date value is closest to the mouse\n // var d = mouseDate - d0[0] > d1[0] - mouseDate ? d1 : d0;\n\n const data = this.plotData[index];\n\n this.pointer = {\n x: this.scaleX(data[0]),\n y: this.scaleY(data[1]),\n };\n\n this.dispatchEvent(\n new CustomEvent('over', {\n detail: {\n coordinate: this.lines[index],\n position: this.pointer\n }\n }),\n );\n }\n\n private pointerOut() {\n this.pointer = {\n x: 0,\n y: 0,\n };\n this.dispatchEvent(new CustomEvent('out'));\n }\n\n override createRenderRoot() {\n return this;\n }\n}\n\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'elevation-profile': ElevationProfile;\n }\n}\n"],"names":[],"version":3,"file":"elevation-profile.js.map"}
|