kpiTable = {
let kpis = [];
mvrpID.forEach((sol) => {
kpis.push(sol.kpis);
});
yield Inputs.table(kpis, {
columns: [
"vehiclesInProblem",
"nbrRoutes",
"unassigned",
"totalTime",
"totalDistance",
"avgStops"
],
header: {
vehiclesInProblem: "Vehicle Count",
nbrRoutes: "Routes",
unassigned: "Unassigned",
totalTime: "Total Time",
totalDistance: "Total Distance",
avgStops: "Avg. Stops per Veh"
},
width: {
vehiclesInProblem: 80,
nbrRoutes: 80,
unassigned: 80,
totalTime: 120,
totalDistance: 120,
avgStops: 120
},
format: {
type: (x) => x.toUpperCase(),
arrival: (x) =>
new Date(x * 1000).toLocaleTimeString([], {
hour: "2-digit",
minute: "2-digit",
hour12: false
}),
load: (x) => `${x[0]} back ${x[1]} front`,
duration: (x) => (x / 60).toFixed(1) + " mn"
},
maxWidth: 1100,
multiple: false,
required: false
});
}
viewof routeSelector = Inputs.select(routesGeoJson.features.filter(f => f.geometry.type === 'LineString'), {multiple: false, label: "Select route to view", format: x => x.properties.vin, value: t => t.properties.vin})
selectedRoute[0]
stoptimeline = {
const wrapper = DOM.element("div");
const width = 1100;
wrapper.style.width = width + "px";
const m = DOM.element("div");
m.id = "timeline";
m.style.width = 1 * width + "px";
m.style.margin = "auto";
// needs padding otherwise label optimization will fail
m.style.padding = "1px";
wrapper.appendChild(m);
let items = [];
selectedRoute[0].steps.forEach((step, idx) => {
items.push({
year: step.arrival,
title: step.description
? `${idx}-${step.type}-${step.description}`
: `${step.type}`
});
});
// without the timeout observable isn't able to do the label optimization properly
setTimeout(() => {
const ms = milestones(m)
.mapping({
timestamp: "year",
text: "title"
})
.onEventClick((d) => {})
.parseTime("%s")
.labelFormat("%H:%M")
.autoResize(true)
.optimize(true)
.distribution("top-bottom")
.render(items);
}, 0);
return wrapper;
}
{
return geoviewer(routesFiltered, {
width: 800,
height: 500,
col: "#8058a0",
fillOpacity: 0.9,
lineWidth: 3,
style: "nbai",
apiKey: "73d4bee8352b46e483d75fb924889ada"
});
}
routesFiltered
routesGeoJson
geoviewer = require("https://d12qcqjlhp2ahm.cloudfront.net/index_alltrans.min.js").then(
(f) => f.view
)
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
