2c:null 2d:["$","title",null,{"children":"Fleet Working | Targomo | Observable"}] 32:T481,{ if (compTable.length > 0) { const table = document.createElement("table"); // table.style.width = `${width / 2}px`; table.style.maxWidth = `${width / 2}px`; const header = document.createElement("thead"); const headerRow = document.createElement("tr"); Object.keys(compTable[0]).forEach((key) => { const cell = document.createElement("th"); cell.innerHTML = key; headerRow.appendChild(cell); }); header.appendChild(headerRow); const body = document.createElement("tbody"); compTable.forEach((row) => { const color = allVisits.find((v) => v.uuid === row.meeting).color; const tr = document.createElement("tr"); tr.style.background = color; Object.values(row).forEach((cell, i) => { const td = document.createElement("td"); if (i === 0) { td.style.paddingLeft = "5px"; } td.style.color = "white"; td.innerHTML = cell ? cell : ""; tr.appendChild(td); }); body.appendChild(tr); }); table.appendChild(header); table.appendChild(body); return html`${table}`; } else { return; } }33:T4fa,Plot.plot({ height: 300, width, x: { padding: 0.0, domain: dateRange, axis: "top", tickSize: 0 }, y: { type: "utc", reverse: true, domain: Array.from({ length: 11 }).map((d, i) => (i + 8) * 3600000), grid: true, tickSize: 0 }, marks: [ Plot.barY(calendarItems, { y1: (d) => timeOffset(d, "start"), y2: (d) => timeOffset(d, "end"), x: (d) => dayjs(d.start).format("YYYY-MM-DD"), fill: (d) => { const c = d3.color(d.color); c.opacity = 0.5; return c.toString(); } }), Plot.barY( transports.map((d) => d.metadata.interruptionTimes[0]), { y1: (d) => timeOffset(d, "start"), y2: (d) => timeOffset(d, "end"), x: (d) => dayjs(d.start).format("YYYY-MM-DD"), fill: "#ccc" } ), Plot.gridY({ stroke: "#000", strokeOpacity: 1, strokeWidth: 1.5 }), Plot.cell(dateRange, { x: (d) => d, fill: "none", stroke: "#000", strokeWidth: 1.5 }), Plot.barY(optimization, { y1: (d) => timeOffset(d, "start"), y2: (d) => timeOffset(d, "end"), x: (d) => dayjs(d.start).format("YYYY-MM-DD"), strokeWidth: 3, inset: 1.5, stroke: (d) => d.color }) ] })34:T58d,viewof map = { let container = html`

`; // Give the container dimensions. yield container; // Create the "map" object with the maplibre.Map constructor, referencing // the container div const mapRef = (container.value = new maplibre.Map({ container, center: agency.address, zoom: 11, // minZoom: 10, // pitch: 35, style: TgmClient().basemaps.getGLStyleURL("Light") })).addControl(new maplibre.NavigationControl()); // new maplibre.Marker({ color: "black" }) // .setLngLat(agency.address) // .addTo(mapRef); new maplibre.Popup({ closeOnClick: false }) .setLngLat(agency.address) .setHTML("Agency") .addTo(mapRef); await new Promise((resolve, reject) => { mapRef.on("load", async () => { mapRef.addSource("route", { type: "geojson", attribution: `© Targomo`, data: { type: "FeatureCollection", features: [] } }); mapRef.addLayer({ id: "route", type: "line", source: "route", layout: { "line-join": "round", "line-cap": "round" }, paint: { "line-width": 2, "line-color": ["get", "color"] } }); resolve(); }); }); invalidation.then(() => mapRef.remove()); yield container; }35:T609,calendarItemsAll = [ { id: "scheduled1", location: "Im Marienpark 23, 12107 Berlin, Germany", geolocation: { lat: 52.438082, lng: 13.36822 }, color: d3.schemeCategory10[1], start: "2023-03-21T09:00:00+01:00", end: "2023-03-21T10:00:00+01:00" }, { id: "scheduled2", location: "Potsdamer Str. 182, 10783 Berlin, Germany", geolocation: { lat: 52.493704, lng: 13.360434 }, color: d3.schemeCategory10[2], start: "2023-03-21T10:30:00+01:00", end: "2023-03-21T11:30:00+01:00" }, { id: "scheduled3", location: "Jesse-Owens-Allee, 14053 Berlin, Germany", geolocation: { lat: 52.511138, lng: 13.238996 }, color: d3.schemeCategory10[3], start: "2023-03-21T13:00:00+01:00", end: "2023-03-21T14:00:00+01:00" }, { id: "scheduled4", location: "Lehrter Str. 57, 10557 Berlin, Germany", geolocation: { lat: 52.533042, lng: 13.359729 }, color: d3.schemeCategory10[4], start: "2023-03-21T16:00:00+01:00", end: "2023-03-21T17:00:00+01:00" }, { id: "scheduled5", location: "An d. Wuhlheide 263, 12555 Berlin, Germany", geolocation: { lat: 52.457349, lng: 13.568059 }, color: d3.schemeCategory10[5], start: "2023-03-22T10:00:00+01:00", end: "2023-03-22T11:00:00+01:00" }, { id: "scheduled6", location: "Rennbahnstraße 45, 13086 Berlin, Germany", geolocation: { lat: 52.563628, lng: 13.455974 }, color: d3.schemeCategory10[6], start: "2023-03-22T15:30:00+01:00", end: "2023-03-22T16:30:00+01:00" } ]36:[] 30:{"id":"9ce5af52afce89db","slug":null,"title":"Fleet Working","thumbnail":"88e95613edaa435acac00822d3bd8657a46092a86304dff303135ddb39a35574","access_level":"public","create_time":"$D2023-03-17T14:37:53.756Z","update_time":"$D2023-03-24T16:30:37.097Z","view_time":null,"first_public_time":"$D2023-03-17T14:37:53.756Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b873ed05f5a7d959","login":"targomo","name":"Targomo","avatar_url":"https://avatars-next.observableusercontent.com/39645f1242d4403a667e1c0e54a0d6755d36418f30088e89a9c65e6f84f9a3bf","tier":"starter_2024"},"version":869,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a217b68901b4272f","login":"targomo","name":"Targomo","avatar_url":"https://avatars-next.observableusercontent.com/39645f1242d4403a667e1c0e54a0d6755d36418f30088e89a9c65e6f84f9a3bf","tier":null}],"members":[{"type":"individual","id":"a217b68901b4272f","login":"targomo","name":"Targomo","avatar_url":"https://avatars-next.observableusercontent.com/39645f1242d4403a667e1c0e54a0d6755d36418f30088e89a9c65e6f84f9a3bf","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Fleet Working","cells":[{"id":0,"value":"# Fleet Working","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":64,"value":"Candidate event: our task is to find the best potential times for a new visit location, considering already scheduled visits.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":267,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"_drag the blue candidate location marker to test different locations_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":75,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":723,"value":"viewof calendarItems = Inputs.table(calendarItemsAll, {\n columns: [\"id\", \"location\", \"color\", \"start\", \"end\"],\n value: calendarItemsAll,\n format: {\n color: (d) => htl.html`\n

`\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"Calendar events are meeting to be had in the upcoming week. The issue is, these are \"scheduled\", not \"to be scheduled\", so they must be maintained, which means a very strict time window.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":54,"value":"\"Agency\" in this case is the Fleet \"store\" object.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"agency = ({\n uuid: \"agency123\",\n name: \"Targomo GmbH\",\n address: { lng: 13.41533, lat: 52.523299 }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"\"transport\" is the driver, or \"agent\" in this use-case. The same agent is duplicated for every single day (with availability window limited to that day), in order to test all days.\n\nThe agent's start and end locations default to the store (agency), but these both can be overridden on the transport level.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":169,"value":"transports = dateRange.map((d) => createDayAgent(d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":809,"value":"## Data helper functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"function createDayAgent(date) {\n return {\n vehicle: {\n uuid: `agent_${date}`,\n storeUuid: agency.uuid,\n priority: 1,\n fixedTravelCosts: (dayjs(date).get(\"d\") - 1) * 60 // each day of the week gets an additional 60s penalty to prioritize earlier dates\n },\n metadata: {\n earliestDepartureTime: `${date}T08:00:00+01:00`, // day start\n latestArrivalTime: `${date}T18:00:00+01:00`, // day end\n interruptionTimes: [\n {\n start: `${date}T12:00:00+01:00`, // lunch break start\n end: `${date}T13:00:00+01:00` // lunch break end\n }\n ],\n start: agency.address, // could also be a home address\n endDestination: agency.address // could also be a home address\n }\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"function createOrder(config) {\n const { uuid, storeUuid, lnglat, visitingTimes, color } = config;\n\n const orderConfig = {\n uuid,\n storeUuid,\n priority: 1,\n address: {\n avgHandlingTime: 3600, // the is the meeting time\n lat: lnglat.lat,\n lng: lnglat.lng\n },\n visitingTimes, // if already scheduled, we enforce with strict visiting times\n color\n };\n\n return orderConfig;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"timeOffset = (d, key) => dayjs(d[key]).diff(dayjs(dayjs(d[key]).startOf(\"day\"))) // get ms since day start to plot on calendar","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"## Fleet API configuration","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":172,"value":"config = ({\n optimizationTime: 2,\n optimizationAlgorithm: \"CONSTRAINT_SATISFACTION\",\n stores: [agency],\n orders: allVisits,\n transports,\n optimizationMetadata: {\n geojsonCreation: \"ROUTING_SERVICE\",\n unimprovedWaitingTime: 1,\n disableShiftingOfVehicleDeparture: false,\n filterOrdersWithWaitingCostHigherThan: 3600,\n travelOptions: {\n travelType: \"car\",\n elevationEnabled: true,\n maxEdgeWeight: 3600,\n edgeWeight: \"time\",\n serviceUrl: \"https://api.targomo.com/westcentraleurope/\",\n serviceKey: targomoKey(),\n // waitingCostFactors: {\n // \"0\": 0.0,\n // \"300\": 0.5\n // }\n }\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"## Fleet API results","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":636,"value":"fullOptimization = {\n const rawFetch = await fetch(\n `https://api.targomo.com/fleetplanner/v1/api/key-auth/optimizations?key=${targomoKey()}`,\n {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\"\n },\n body: JSON.stringify(config)\n }\n );\n\n return await rawFetch.json();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":704,"value":"{\n const routeGeoJSON = turf.featureCollection(\n fullOptimization.tours\n .map((d, i) =>\n d.featureCollection.features\n .filter((f) => f.geometry.type === \"LineString\")\n .map((f) => {\n f.properties.tour = i + 1;\n f.properties.color = d3.schemeCategory10[9 - i];\n return f;\n })\n )\n .flat()\n );\n map.getSource(\"route\").setData(routeGeoJSON);\n return routeGeoJSON;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"optimization = {\n const toursFormat = fullOptimization.tours\n .map((d, i) =>\n d.tourItems.map((t) => {\n const { expectedStartVisit, expectedDeparture, order } = t;\n const orderMatch = config.orders.find((o) => o.uuid === order.uuid);\n const tourFormat = {\n sort: +dayjs(expectedStartVisit),\n start: dayjs(expectedStartVisit),\n end: dayjs(expectedDeparture),\n order: order.uuid,\n tour: i + 1,\n color: allVisits.find((d) => d.uuid === order.uuid).color\n };\n return tourFormat;\n })\n )\n .flat()\n .sort((a, b) => a.sort < b.sort);\n\n updateCompTable(toursFormat);\n\n return toursFormat;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"

\n## Working data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":91,"value":"viewof candidateLocation = {\n const uuid = \"planned1\";\n const [lat, lng] = [52.54069923102475, 13.206526560634476];\n const inp = Inputs.input({ lng, lat, uuid });\n const marker = new maplibre.Marker({\n draggable: true,\n color: d3.schemeCategory10[0]\n })\n .setLngLat({ lng, lat })\n .addTo(map);\n\n marker.on(\"dragend\", () => {\n inp.value = { ...marker.getLngLat(), uuid };\n inp.dispatchEvent(new Event(\"input\", { bubbles: true }));\n });\n return inp;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":850,"value":"currentmarkers = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":846,"value":"{\n currentmarkers.forEach((marker) => marker.remove());\n for (const item of calendarItems) {\n const marker = new maplibre.Marker({\n color: item.color\n })\n .setLngLat(item.geolocation)\n .addTo(map);\n currentmarkers.push(marker);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"allVisits = [\n ...calendarItems.map((d) =>\n createOrder({\n uuid: d.id,\n lnglat: d.geolocation,\n storeUuid: agency.uuid,\n visitingTimes: [\n {\n start: d.start,\n end: d.end\n }\n ],\n color: d.color\n })\n ),\n createOrder({\n uuid: candidateLocation.uuid,\n lnglat: { lng: candidateLocation.lng, lat: candidateLocation.lat },\n storeUuid: agency.uuid,\n color: d3.schemeCategory10[0]\n })\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"{\n const bbox = turf.bbox(\n turf.featureCollection([\n ...calendarItems.map((d) =>\n turf.point([d.geolocation.lng, d.geolocation.lat])\n ),\n turf.point([agency.address.lng, agency.address.lat]),\n turf.point([candidateLocation.lng, candidateLocation.lat])\n ])\n );\n map.fitBounds(bbox, { padding: 50 });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"function updateCompTable(optimized) {\n mutable compTable = optimized\n .map((d) => {\n const { start, end, order, tour, sort } = d;\n return {\n tour,\n meeting: order,\n sort,\n start: start.format(\"YYYY-MM-DD HH:mm\"),\n end: end.format(\"YYYY-MM-DD HH:mm\")\n };\n })\n .sort((a, b) => a.sort - b.sort)\n .map((d) => {\n const { sort, ...fields } = d;\n return fields;\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"mutable compTable = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"

\n## Imports\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":68,"value":"maplibre = {\n const gl = await require(\"maplibre-gl@2.4.0\");\n const href = await require.resolve(\"maplibre-gl@2.4.0/dist/maplibre-gl.css\");\n document.head.appendChild(html``);\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"import {\n attribution,\n tgmCoreClient,\n codeStyle,\n tableStyle,\n datatable,\n tgmMultiIntro,\n targomoKey,\n resourcesSpacer\n} from \"@targomo/re-usable-targomo-resources\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"TgmClient = function () {\n return tgmCoreClient(\"westcentraleurope\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"turf = require(\"@turf/turf@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"dayjs = {\n const dayjs = await require(\"dayjs\");\n // const customParseFormat = await require(\"dayjs/plugin/customParseFormat\");\n // dayjs.extend(customParseFormat);\n return dayjs;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"dateRange = {\n const start = dayjs(\"2023-03-20T00:00:00\");\n const days = Array.from({ length: 5 }).map((d, i) =>\n start.add(i, \"day\").format(\"YYYY-MM-DD\")\n );\n return days;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":835,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 31:"$30:body"