// ChartType selects the client-side renderer: "numeric" (int/float line

	// chart), "bool" (streak heatmap), or "" (no chart, e.g. string habits).

	ChartType string

	// ChartPoints is the JSON-encoded []chartPoint for the chart, chronological.

	ChartPoints string

}

// chartPoint is one plotted value: T is a unix timestamp (seconds), V is the

// record's value as a float (1/0 for bool).

type chartPoint struct {

	T int64   `json:"t"`

	V float64 `json:"v"`

	"encoding/json"

	"strconv"

}

// buildChartData turns records (as returned by listRecordsForHabit, newest

// first) into chart type + JSON points for the habit detail chart. Numeric

// habits (int/float) get a line chart; bool habits get a streak heatmap;

// string habits have no natural numeric chart and are skipped.

func buildChartData(valueType string, records []Record) (chartType, pointsJSON string) {

	switch valueType {

	case "int", "float":

		chartType = "numeric"

	case "bool":

		chartType = "bool"

	default:

		return "", ""

	}

	points := make([]chartPoint, 0, len(records))

	for i := len(records) - 1; i >= 0; i-- {

		r := records[i]

		var v float64

		if chartType == "bool" {

			if r.Value == "true" {

				v = 1

			}

		} else {

			f, err := strconv.ParseFloat(r.Value, 64)

			if err != nil {

				continue

			}

			v = f

		}

		points = append(points, chartPoint{T: r.RecordedAt, V: v})

	}

	if len(points) == 0 {

		return "", ""

	}

	b, err := json.Marshal(points)

	if err != nil {

		return "", ""

	}

	return chartType, string(b)

	chartType, chartPoints := buildChartData(habit.ValueType, records)

		Success:     r.URL.Query().Get("success"),

		Error:       r.URL.Query().Get("error"),

		Habit:       habitToRow(*habit, len(records)),

		Days:        groupByDay(records),

		ChartType:   chartType,

		ChartPoints: chartPoints,

// Dependency-free chart rendering for the habit detail page. Reads JSON

// points off #habit-chart's data attributes and draws an inline SVG: a line

// chart for numeric (int/float) habits, a day-by-day streak heatmap for bool

// habits.

(function () {

  var SVG_NS = "http://www.w3.org/2000/svg";

  function svgEl(tag, attrs) {

    var el = document.createElementNS(SVG_NS, tag);

    for (var k in attrs) el.setAttribute(k, attrs[k]);

    return el;

  }

  function pad2(n) {

    return n < 10 ? "0" + n : "" + n;

  }

  function dayKey(date) {

    return date.getFullYear() + "-" + pad2(date.getMonth() + 1) + "-" + pad2(date.getDate());

  }

  function renderLine(el, points, unit) {

    var width = Math.max(el.clientWidth || 0, 280);

    var height = 180;

    var padding = { top: 16, right: 16, bottom: 24, left: 44 };

    var vals = points.map(function (p) {

      return p.v;

    });

    var min = Math.min.apply(null, vals);

    var max = Math.max.apply(null, vals);

    if (min === max) {

      min -= 1;

      max += 1;

    }

    var pad = (max - min) * 0.1;

    min -= pad;

    max += pad;

    var t0 = points[0].t;

    var t1 = points[points.length - 1].t;

    if (t0 === t1) t1 = t0 + 1;

    var innerW = width - padding.left - padding.right;

    var innerH = height - padding.top - padding.bottom;

    function x(t) {

      return padding.left + ((t - t0) / (t1 - t0)) * innerW;

    }

    function y(v) {

      return padding.top + innerH - ((v - min) / (max - min)) * innerH;

    }

    var svg = svgEl("svg", {

      width: width,

      height: height,

      viewBox: "0 0 " + width + " " + height,

      class: "chart-svg",

    });

    [min + pad, (min + max) / 2, max - pad].forEach(function (v) {

      var ly = y(v).toFixed(1);

      svg.appendChild(

        svgEl("line", {

          x1: padding.left,

          x2: width - padding.right,

          y1: ly,

          y2: ly,

          class: "chart-gridline",

        }),

      );

      var label = svgEl("text", {

        x: padding.left - 6,

        y: ly,

        class: "chart-axis-label",

        "text-anchor": "end",

        "dominant-baseline": "middle",

      });

      label.textContent = Number(v.toFixed(2));

      svg.appendChild(label);

    });

    var d = points

      .map(function (p, i) {

        return (i === 0 ? "M" : "L") + x(p.t).toFixed(1) + "," + y(p.v).toFixed(1);

      })

      .join(" ");

    svg.appendChild(svgEl("path", { d: d, class: "chart-line" }));

    points.forEach(function (p) {

      var cx = x(p.t).toFixed(1);

      var cy = y(p.v).toFixed(1);

      var dot = svgEl("circle", { cx: cx, cy: cy, r: 3, class: "chart-dot" });

      var title = svgEl("title", {});

      title.textContent = new Date(p.t * 1000).toLocaleString() + ": " + p.v + (unit ? " " + unit : "");

      dot.appendChild(title);

      svg.appendChild(dot);

    });

    el.appendChild(svg);

  }

  function renderHeatmap(el, points) {

    var days = {};

    points.forEach(function (p) {

      var key = dayKey(new Date(p.t * 1000));

      var truthy = p.v === 1;

      if (!days[key] || truthy) days[key] = truthy ? 2 : 1;

    });

    var keys = Object.keys(days).sort();

    var start = new Date(keys[0] + "T00:00:00");

    start.setDate(start.getDate() - start.getDay());

    var today = new Date();

    today.setHours(0, 0, 0, 0);

    var totalDays = Math.round((today - start) / 86400000) + 1;

    var weeks = Math.ceil(totalDays / 7);

    var cell = 11;

    var gap = 3;

    var step = cell + gap;

    var width = weeks * step;

    var height = 7 * step;

    var svg = svgEl("svg", {

      width: width,

      height: height,

      viewBox: "0 0 " + width + " " + height,

      class: "chart-svg",

    });

    for (var i = 0; i < totalDays; i++) {

      var d = new Date(start);

      d.setDate(d.getDate() + i);

      var key = dayKey(d);

      var status = days[key] || 0;

      var week = Math.floor(i / 7);

      var dow = i % 7;

      var rect = svgEl("rect", {

        x: week * step,

        y: dow * step,

        width: cell,

        height: cell,

        rx: 2,

        class: "chart-cell chart-cell-" + status,

      });

      var title = svgEl("title", {});

      title.textContent = key + ": " + (status === 2 ? "true" : status === 1 ? "false" : "no record");

      rect.appendChild(title);

      svg.appendChild(rect);

    }

    el.appendChild(svg);

  }

  function init() {

    var el = document.getElementById("habit-chart");

    if (!el) return;

    var points;

    try {

      points = JSON.parse(el.dataset.points || "[]");

    } catch (e) {

      return;

    }

    if (!points.length) return;

    if (el.dataset.type === "bool") {

      renderHeatmap(el, points);

    } else {

      renderLine(el, points, el.dataset.unit || "");

    }

  }

  init();

})();

/* Habit detail chart: SVG rendered client-side by chart.js. */

.chart {

  width: 100%;

  overflow-x: auto;

}

.chart-svg {

  display: block;

  max-width: 100%;

}

.chart-gridline {

  stroke: #333;

  stroke-width: 1;

}

.chart-axis-label {

  fill: #888;

  font-size: 10px;

}

.chart-line {

  fill: none;

  stroke: #ffffff;

  stroke-width: 1.5;

  opacity: 0.8;

}

.chart-dot {

  fill: #121113;

  stroke: #ffffff;

  stroke-width: 1.5;

}

.chart-cell-0 {

  fill: #1e1c1f;

  stroke: #333;

  stroke-width: 1;

}

.chart-cell-1 {

  fill: #555;

}

.chart-cell-2 {

  fill: #ffffff;

}

    {{if .ChartType}}

    <section class="section">

      <h2>{{if eq .ChartType "bool"}}Streak{{else}}Trend{{end}}</h2>

      <div

        id="habit-chart"

        class="chart"

        data-type="{{.ChartType}}"

        data-unit="{{.Habit.Unit}}"

        data-points="{{.ChartPoints}}"

      ></div>

    </section>

    {{end}}

    <script src="/static/chart.js"></script>