@swiftbrowser/swift 0.0.0-stage → 0.2.0

package/Sources/SwiftUI/Charts/Chart.swift

@@ -0,0 +1,660 @@
+// `Chart`: kind `chart`, props `{marks, xAxis, yAxis, legend}` in unit
+// coordinates (x left → right, y top → bottom), children `chartitem`s for
+// annotations and view axis labels. See docs/ops-protocol.md, Phase 7.
+
+// MARK: - Chart
+
+public struct Chart<Content: ChartContent> {
+    let content: Content
+
+    public init(@ChartContentBuilder content: () -> Content) {
+        self.content = content()
+    }
+}
+
+extension Chart {
+    public init<Data: RandomAccessCollection, C: ChartContent>(
+        _ data: Data, @ChartContentBuilder content: @escaping (Data.Element) -> C
+    ) where Data.Element: Identifiable, Content == ForEach<Data, Data.Element.ID, C> {
+        self.content = ForEach(data, content: content)
+    }
+
+    public init<Data: RandomAccessCollection, ID: Hashable, C: ChartContent>(
+        _ data: Data, id: KeyPath<Data.Element, ID>, @ChartContentBuilder content: @escaping (Data.Element) -> C
+    ) where Content == ForEach<Data, ID, C> {
+        self.content = ForEach(data, id: id, content: content)
+    }
+}
+
+extension Chart: _PrimitiveView {}
+extension Chart: _HostView {
+    var _kind: String { "chart" }
+
+    func _props(in environment: EnvironmentValues) -> _JSON {
+        _resolveChart(content, config: environment._chartConfig).props
+    }
+
+    var _content: [any View] {
+        // `_content` has no environment; the group reads the chart config
+        // itself and contributes the annotation and label views.
+        [_ChartItems(content: AnyChartContent(content))]
+    }
+}
+
+/// Contributes the chart's `chartitem` children, resolved with the chart
+/// configuration from the environment.
+struct _ChartItems {
+    let content: AnyChartContent
+    @Environment(\._chartConfig) private var config
+
+    init(content: AnyChartContent) { self.content = content }
+}
+extension _ChartItems: _PrimitiveView {}
+extension _ChartItems: _GroupView {
+    var _children: [any View] { _resolveChart(content, config: config).items }
+}
+
+/// An annotation or a view axis label. Kind `chartitem`.
+struct _ChartItemView {
+    let role: String
+    let x0: Double
+    let x1: Double
+    let y0: Double
+    let y1: Double
+    let position: String
+    let alignment: Alignment
+    let spacing: Double
+    let content: any View
+}
+extension _ChartItemView: _PrimitiveView {}
+extension _ChartItemView: _HostView {
+    var _kind: String { "chartitem" }
+
+    func _props(in environment: EnvironmentValues) -> _JSON {
+        .object([
+            "role": .string(role),
+            "x0": .number(_unit(x0)), "x1": .number(_unit(x1)),
+            "y0": .number(_unit(y0)), "y1": .number(_unit(y1)),
+            "position": .string(position),
+            "alignment": .string(alignment._name),
+            "spacing": .number(spacing),
+        ])
+    }
+
+    var _content: [any View] { [content] }
+}
+
+// MARK: - Scales
+
+/// A resolved scale: categories (band) or a continuous domain.
+struct _ChartScale {
+    enum Kind {
+        case band([String])
+        case continuous(lower: Double, upper: Double, isDate: Bool)
+    }
+    var kind: Kind
+    var reversed = false
+
+    var isBand: Bool { if case .band = kind { true } else { false } }
+    var isDate: Bool { if case .continuous(_, _, let isDate) = kind { isDate } else { false } }
+
+    /// 0…1 from the lower bound (or first category's center) to the upper.
+    func unit(_ value: _PlottableValue) -> Double? {
+        let raw: Double?
+        switch kind {
+        case .band(let categories):
+            guard case .string(let s) = value, let index = categories.firstIndex(of: s) else { return nil }
+            raw = (Double(index) + 0.5) / Double(categories.count)
+        case .continuous(let lower, let upper, _):
+            guard let v = value.continuous else { return nil }
+            raw = upper > lower ? (v - lower) / (upper - lower) : 0.5
+        }
+        return raw.map { reversed ? 1 - $0 : $0 }
+    }
+
+    /// The band of a category, `nil` on a continuous scale.
+    func band(_ value: _PlottableValue) -> (Double, Double)? {
+        guard case .band(let categories) = kind, case .string(let s) = value,
+              let index = categories.firstIndex(of: s) else { return nil }
+        let n = Double(categories.count)
+        let band = (Double(index) / n, Double(index + 1) / n)
+        return reversed ? (1 - band.1, 1 - band.0) : band
+    }
+
+    /// The band width when every value gets one band.
+    var bandWidth: Double {
+        if case .band(let categories) = kind { return 1 / Double(max(categories.count, 1)) }
+        return 1
+    }
+}
+
+/// The ticks of one `AxisMarks`, as values.
+struct _AxisTicks {
+    var marks: AxisMarks
+    var values: [_PlottableValue]
+}
+
+struct _ResolvedAxis {
+    var scale: _ChartScale
+    var ticks: [_AxisTicks]
+    var dateFormat: _DateFormat
+}
+
+/// Builds the scale and ticks of one axis from the values the marks put on it.
+func _resolveAxis(values: [_PlottableValue], domain: _ScaleDomainSpec, axis: _AxisSpec,
+                  includesZeroByDefault: Bool) -> _ResolvedAxis {
+    var reversed = false
+    var includesZero: Bool? = nil
+    var explicitDomain: [_PlottableValue]? = nil
+    switch domain {
+    case .automatic(let zero, let rev):
+        includesZero = zero
+        reversed = rev
+    case .values(let domainValues):
+        explicitDomain = domainValues
+    }
+
+    let allValues = explicitDomain ?? values
+    let axisMarks = axis.marks.isEmpty ? [AxisMarks()] : axis.marks
+
+    // Categories: a band scale.
+    if allValues.contains(where: \.isString) {
+        var categories: [String] = []
+        for value in allValues {
+            if case .string(let s) = value, !categories.contains(s) { categories.append(s) }
+        }
+        let scale = _ChartScale(kind: .band(categories), reversed: reversed)
+        let ticks = axisMarks.map { marks -> _AxisTicks in
+            if case .explicit(let explicit) = marks.values.spec {
+                return _AxisTicks(marks: marks, values: explicit.filter { value in
+                    if case .string(let s) = value { return categories.contains(s) }
+                    return false
+                })
+            }
+            return _AxisTicks(marks: marks, values: categories.map { .string($0) })
+        }
+        return _ResolvedAxis(scale: scale, ticks: ticks, dateFormat: .dayMonth)
+    }
+
+    // Continuous: numbers or dates.
+    let isDate = allValues.contains(where: \.isDate)
+    let numbers = allValues.compactMap(\.continuous)
+    var lower = numbers.min() ?? 0
+    var upper = numbers.max() ?? (isDate ? lower + _secondsPerDay : 1)
+    if explicitDomain == nil, includesZero ?? includesZeroByDefault, !isDate {
+        lower = min(lower, 0)
+        upper = max(upper, 0)
+    }
+    if upper <= lower {
+        if isDate {
+            lower -= 12 * 3600
+            upper += 12 * 3600
+        } else if lower == 0 {
+            upper = 1
+        } else {
+            let pad = abs(lower) * 0.1
+            lower -= pad
+            upper += pad
+        }
+    }
+
+    // Ticks per `AxisMarks`, rounding the domain to them when asked.
+    var dateFormat = _DateFormat.dayMonth
+    var tickValues: [[Double]] = []
+    for marks in axisMarks {
+        switch marks.values.spec {
+        case .automatic(let options):
+            var ticks: [Double]
+            if isDate {
+                let dated = _niceDateTicks(lower: lower, upper: upper, options: options)
+                ticks = dated.ticks
+                dateFormat = dated.format
+            } else {
+                ticks = _niceTicks(lower: lower, upper: upper, options: options)
+            }
+            if explicitDomain == nil, let first = ticks.first, options.roundLowerBound { lower = min(lower, first) }
+            if explicitDomain == nil, let last = ticks.last, options.roundUpperBound { upper = max(upper, last) }
+            tickValues.append(ticks)
+        case .stride(let step, let roundLower, let roundUpper):
+            var ticks: [Double] = []
+            guard step > 0 else { tickValues.append([]); continue }
+            var tick = (lower / step).rounded(.down) * step
+            let last = (upper / step).rounded(.up) * step
+            while tick <= last + step * 1e-9, ticks.count < 1000 {
+                ticks.append(_cleanTick(tick, step: step))
+                tick += step
+            }
+            if explicitDomain == nil, let first = ticks.first, roundLower { lower = min(lower, first) }
+            if explicitDomain == nil, let final = ticks.last, roundUpper { upper = max(upper, final) }
+            if isDate { dateFormat = _dateFormat(forValues: ticks) }
+            tickValues.append(ticks)
+        case .explicit(let explicit):
+            let ticks = explicit.compactMap(\.continuous)
+            if isDate { dateFormat = _dateFormat(forValues: ticks) }
+            tickValues.append(ticks)
+        }
+    }
+
+    // Drop the ticks that fall outside the (unrounded) domain.
+    let epsilon = (upper - lower) * 1e-9
+    let scale = _ChartScale(kind: .continuous(lower: lower, upper: upper, isDate: isDate), reversed: reversed)
+    let ticks = zip(axisMarks, tickValues).map { marks, values in
+        let kept: [Double]
+        if case .explicit = marks.values.spec {
+            kept = values
+        } else {
+            kept = values.filter { $0 >= lower - epsilon && $0 <= upper + epsilon }
+        }
+        return _AxisTicks(marks: marks, values: kept.map { isDate ? .date($0) : .number($0) })
+    }
+    return _ResolvedAxis(scale: scale, ticks: ticks, dateFormat: dateFormat)
+}
+
+// MARK: - Resolution
+
+struct _ResolvedChart {
+    var props: _JSON
+    var items: [any View]
+}
+
+/// A mark after scaling, ready to serialize.
+private struct _OutMark {
+    var json: [String: _JSON]
+    /// Line/area grouping key, `nil` for other kinds.
+    var groupKey: _PlottableValue?
+    var groupKind: _RawMarkKind?
+    var points: [[String: Double]] = []
+    var sortKeys: [Double] = []
+}
+
+private struct _ChartResolver {
+    let x: _ResolvedAxis
+    let y: _ResolvedAxis
+    /// Palette indices for `foregroundStyle(by:)` / `symbol(by:)` values.
+    var styleIndices: [_PlottableValue: Int] = [:]
+    var symbolIndices: [_PlottableValue: Int] = [:]
+    var styleOrder: [_LabelledValue] = []
+    var symbolOrder: [_LabelledValue] = []
+    /// The default bar width on a continuous x axis: the smallest gap between bars.
+    var continuousBarBand = 1.0
+
+    init(marks: [_RawMark], config: _ChartConfig) {
+        x = _resolveAxis(values: marks.flatMap(\.xValues), domain: config.xDomain, axis: config.xAxis,
+                         includesZeroByDefault: false)
+        y = _resolveAxis(values: marks.flatMap(\.yValues), domain: config.yDomain, axis: config.yAxis,
+                         includesZeroByDefault: true)
+        for mark in marks {
+            if let by = mark.modifiers.styleBy, styleIndices[by.value] == nil {
+                styleIndices[by.value] = styleOrder.count
+                styleOrder.append(by)
+            }
+            if let by = mark.modifiers.symbolBy, symbolIndices[by.value] == nil {
+                symbolIndices[by.value] = symbolOrder.count
+                symbolOrder.append(by)
+            }
+        }
+        if !x.scale.isBand {
+            let centers = Set(marks.filter { ($0.kind == .bar || $0.kind == .rectangle) && $0.x != nil }
+                .compactMap { $0.x.flatMap(x.scale.unit) }).sorted()
+            var gap = 1.0
+            for (a, b) in zip(centers, centers.dropFirst()) where b - a > 1e-9 { gap = min(gap, b - a) }
+            continuousBarBand = centers.count > 1 ? gap : 1
+        }
+    }
+
+    // Unit coordinates: x left → right, y top → bottom.
+    func ux(_ value: _PlottableValue) -> Double? { x.scale.unit(value) }
+    func uy(_ value: _PlottableValue) -> Double? { y.scale.unit(value).map { 1 - $0 } }
+
+    /// The unit position of 0 on the y axis (the bar baseline), clamped to the plot.
+    var yBaseline: Double {
+        if y.scale.isBand { return 1 }
+        return 1 - max(0, min(1, y.scale.unit(.number(0)) ?? 0))
+    }
+
+    var xBaseline: Double {
+        if x.scale.isBand { return 0 }
+        return max(0, min(1, x.scale.unit(.number(0)) ?? 0))
+    }
+
+    func style(for modifiers: _MarkModifiers) -> _JSON {
+        if let style = modifiers.style { return style._json }
+        if let by = modifiers.styleBy, let index = styleIndices[by.value] {
+            return _chartColorPalette[index % _chartColorPalette.count]._json
+        }
+        return Color.blue._json
+    }
+
+    func symbol(for modifiers: _MarkModifiers, defaultSymbol: String?) -> String? {
+        if let symbol = modifiers.symbol { return symbol }
+        if let by = modifiers.symbolBy, let index = symbolIndices[by.value] {
+            return _chartSymbolPalette[index % _chartSymbolPalette.count]
+        }
+        return defaultSymbol
+    }
+
+    /// The rectangle of a bar or rectangle mark.
+    func rect(of mark: _RawMark) -> (x0: Double, x1: Double, y0: Double, y1: Double, fixedWidth: Double?) {
+        var x0 = 0.0, x1 = 1.0, y0 = 0.0, y1 = 1.0
+        var fixedWidth: Double? = nil
+
+        if let start = mark.xStart, let end = mark.xEnd {
+            x0 = x.scale.band(start)?.0 ?? ux(start) ?? 0
+            x1 = x.scale.band(end)?.1 ?? ux(end) ?? 1
+        } else if let value = mark.x {
+            let center = ux(value) ?? 0.5
+            let band = x.scale.isBand ? x.scale.bandWidth : continuousBarBand
+            switch mark.width ?? .automatic {
+            case .fixed(let points):
+                fixedWidth = points
+                x0 = center
+                x1 = center
+            case .ratio(let ratio):
+                x0 = center - band * ratio / 2
+                x1 = center + band * ratio / 2
+            case .automatic, .inset:
+                x0 = center - band * 0.4
+                x1 = center + band * 0.4
+            }
+        }
+
+        if let start = mark.yStart, let end = mark.yEnd {
+            y0 = y.scale.band(start).map { 1 - $0.1 } ?? uy(start) ?? 0
+            y1 = y.scale.band(end).map { 1 - $0.0 } ?? uy(end) ?? 1
+        } else if let value = mark.y {
+            if let band = y.scale.band(value) {
+                let center = 1 - (band.0 + band.1) / 2
+                let width = y.scale.bandWidth
+                switch mark.height ?? .automatic {
+                case .fixed, .automatic, .inset:
+                    y0 = center - width * 0.4
+                    y1 = center + width * 0.4
+                case .ratio(let ratio):
+                    y0 = center - width * ratio / 2
+                    y1 = center + width * ratio / 2
+                }
+            } else if mark.xStart != nil, mark.xEnd != nil {
+                // A horizontal bar on a continuous y axis: a thin band around the value.
+                let center = uy(value) ?? 0.5
+                y0 = center - 0.04
+                y1 = center + 0.04
+            } else {
+                y0 = uy(value) ?? 0
+                y1 = yBaseline
+            }
+        }
+
+        return (min(x0, x1), max(x0, x1), min(y0, y1), max(y0, y1), fixedWidth)
+    }
+
+    /// Scales every mark; lines and areas with the same key become one mark.
+    func outMarks(_ marks: [_RawMark], includeMasks: Bool) -> [_OutMark] {
+        var out: [_OutMark] = []
+        var groupIndex: [String: Int] = [:]
+
+        for mark in marks {
+            let m = mark.modifiers
+            var json: [String: _JSON] = [
+                "style": style(for: m),
+                "opacity": .number(m.opacity),
+            ]
+            if includeMasks, let mask = m.mask, let maskJSON = resolveMask(mask) {
+                json["mask"] = maskJSON
+            }
+
+            switch mark.kind {
+            case .bar, .rectangle:
+                let r = rect(of: mark)
+                json["kind"] = .string("rect")
+                json["x0"] = .number(_unit(r.x0))
+                json["x1"] = .number(_unit(r.x1))
+                json["y0"] = .number(_unit(r.y0))
+                json["y1"] = .number(_unit(r.y1))
+                json["cornerRadius"] = .number(m.cornerRadius)
+                json["fixedWidth"] = r.fixedWidth.map { .number($0) } ?? .null
+                out.append(_OutMark(json: json))
+
+            case .point:
+                guard let px = mark.x.flatMap(ux), let py = mark.y.flatMap(uy) else { continue }
+                json["kind"] = .string("point")
+                json["x"] = .number(_unit(px))
+                json["y"] = .number(_unit(py))
+                json["symbol"] = .string(symbol(for: m, defaultSymbol: "circle") ?? "circle")
+                json["symbolSize"] = .number(m.symbolSize ?? 8)
+                out.append(_OutMark(json: json))
+
+            case .rule:
+                var x0 = 0.0, x1 = 1.0, y0 = 0.0, y1 = 1.0
+                if let start = mark.xStart, let end = mark.xEnd {
+                    x0 = ux(start) ?? 0; x1 = ux(end) ?? 1
+                } else if let value = mark.x {
+                    x0 = ux(value) ?? 0.5; x1 = x0
+                }
+                if let start = mark.yStart, let end = mark.yEnd {
+                    y0 = uy(start) ?? 0; y1 = uy(end) ?? 1
+                } else if let value = mark.y {
+                    y0 = uy(value) ?? 0.5; y1 = y0
+                }
+                json["kind"] = .string("rule")
+                json["x0"] = .number(_unit(x0))
+                json["x1"] = .number(_unit(x1))
+                json["y0"] = .number(_unit(y0))
+                json["y1"] = .number(_unit(y1))
+                json["lineWidth"] = .number(m.lineWidth ?? 1)
+                out.append(_OutMark(json: json))
+
+            case .line, .area:
+                guard let xValue = mark.x, let px = ux(xValue) else { continue }
+                let key = mark.series ?? m.styleBy?.value ?? m.symbolBy?.value
+                let keyName = "\(mark.kind):\(key.map { "\($0)" } ?? "")"
+                var point: [String: Double]
+                if mark.kind == .line {
+                    guard let py = (mark.y ?? mark.yEnd).flatMap(uy) else { continue }
+                    point = ["x": _unit(px), "y": _unit(py)]
+                } else {
+                    let top: Double
+                    let bottom: Double
+                    if let start = mark.yStart, let end = mark.yEnd {
+                        top = uy(end) ?? 0
+                        bottom = uy(start) ?? yBaseline
+                    } else if let value = mark.y {
+                        top = uy(value) ?? 0
+                        bottom = yBaseline
+                    } else { continue }
+                    point = ["x": _unit(px), "y0": _unit(min(top, bottom)), "y1": _unit(max(top, bottom))]
+                }
+                if let index = groupIndex[keyName] {
+                    out[index].points.append(point)
+                    out[index].sortKeys.append(px)
+                } else {
+                    json["kind"] = .string(mark.kind == .line ? "line" : "area")
+                    json["interpolation"] = .string(m.interpolation)
+                    if mark.kind == .line {
+                        json["lineWidth"] = .number(m.lineWidth ?? 2)
+                        json["symbol"] = symbol(for: m, defaultSymbol: nil).map { .string($0) } ?? .null
+                        json["symbolSize"] = .number(m.symbolSize ?? 8)
+                    }
+                    groupIndex[keyName] = out.count
+                    out.append(_OutMark(json: json, groupKey: key, groupKind: mark.kind, points: [point], sortKeys: [px]))
+                }
+            }
+        }
+
+        // Lines and areas connect their points in x order.
+        for index in out.indices where out[index].groupKind != nil {
+            let order = out[index].sortKeys.indices.sorted {
+                let a = out[index].sortKeys[$0], b = out[index].sortKeys[$1]
+                return a == b ? $0 < $1 : a < b
+            }
+            let points = order.map { out[index].points[$0] }
+            out[index].json["points"] = .array(points.map { point in
+                .object(point.mapValues { .number($0) })
+            })
+        }
+        return out
+    }
+
+    /// The first area or rect mark of a mask's content, scaled like the chart.
+    func resolveMask(_ content: any ChartContent) -> _JSON? {
+        var collector = _ChartCollector()
+        content._collectAny(into: &collector, modifiers: _MarkModifiers())
+        let marks = outMarks(collector.marks, includeMasks: false)
+        guard let first = marks.first(where: {
+            if case .string(let kind)? = $0.json["kind"] { return kind == "area" || kind == "rect" }
+            return false
+        }) else { return nil }
+        return .object(first.json)
+    }
+
+    /// The anchor rectangle of a mark's annotations.
+    func annotationRect(of mark: _RawMark) -> (x0: Double, x1: Double, y0: Double, y1: Double) {
+        switch mark.kind {
+        case .bar, .rectangle:
+            let r = rect(of: mark)
+            return (r.x0, r.x1, r.y0, r.y1)
+        case .rule:
+            var x0 = 0.0, x1 = 1.0, y0 = 0.0, y1 = 1.0
+            if let value = mark.x { x0 = ux(value) ?? 0.5; x1 = x0 }
+            if let value = mark.y { y0 = uy(value) ?? 0.5; y1 = y0 }
+            return (x0, x1, y0, y1)
+        case .line, .area, .point:
+            let px = mark.x.flatMap(ux) ?? 0.5
+            let py = (mark.y ?? mark.yEnd).flatMap(uy) ?? 0.5
+            return (px, px, py, py)
+        }
+    }
+
+    func axisJSON(_ axis: _ResolvedAxis, spec: _AxisSpec, isX: Bool, items: inout [any View]) -> _JSON {
+        if spec.hidden { return .null }
+        let position = spec.marks.lazy.compactMap { $0.position._name }.first ?? (isX ? "bottom" : "trailing")
+        var gridLines: [_JSON] = []
+        var ticks: [_JSON] = []
+        var labels: [_JSON] = []
+        var views: [any View] = []
+
+        for set in axis.ticks {
+            let count = set.values.count
+            for (index, value) in set.values.enumerated() {
+                let scaled = axis.scale.unit(value)
+                // A value outside the scale's domain (a date bin that starts
+                // before the data) has no mark, as in Swift Charts.
+                if let scaled, scaled < -1e-9 || scaled > 1 + 1e-9 { continue }
+                let unit = scaled ?? 0
+                let at = _unit(isX ? unit : 1 - unit)
+                // A date's label starts at its tick, as Swift Charts places it;
+                // other values are centered on theirs.
+                func label(_ text: String) -> _JSON {
+                    if isX, case .date = value {
+                        return .object(["at": .number(at), "text": .string(text), "anchor": .string("leading")])
+                    }
+                    return .object(["at": .number(at), "text": .string(text)])
+                }
+                let marks = set.marks.content?(AxisValue(index: index, count: count, value: value))._items
+                    ?? [.gridLine, .tick, .label(.automatic)]
+                for item in marks {
+                    switch item {
+                    case .gridLine:
+                        gridLines.append(.number(at))
+                    case .tick:
+                        ticks.append(.number(at))
+                    case .label(.automatic):
+                        labels.append(label(defaultLabel(value, axis: axis)))
+                    case .label(.text(let text)):
+                        labels.append(label(text))
+                    case .label(.formatted(let format)):
+                        labels.append(label(format(value) ?? defaultLabel(value, axis: axis)))
+                    case .label(.view(let view)):
+                        let edge: Double = position == "top" || position == "leading" ? 0 : 1
+                        views.append(_ChartItemView(
+                            role: isX ? "xLabel" : "yLabel",
+                            x0: isX ? at : edge, x1: isX ? at : edge,
+                            y0: isX ? edge : at, y1: isX ? edge : at,
+                            position: position, alignment: .center, spacing: 0, content: view
+                        ))
+                    }
+                }
+            }
+        }
+        items.append(contentsOf: views)
+        return .object([
+            "position": .string(position),
+            "gridLines": .array(gridLines),
+            "ticks": .array(ticks),
+            "labels": .array(labels),
+        ])
+    }
+
+    func defaultLabel(_ value: _PlottableValue, axis: _ResolvedAxis) -> String {
+        switch value {
+        case .date(let seconds): _formatChartDate(seconds, as: axis.dateFormat)
+        case .number(let n): _formatChartNumber(n)
+        case .string(let s): s
+        }
+    }
+
+    func legendJSON(config: _ChartConfig) -> _JSON {
+        guard !config.legendHidden, !styleOrder.isEmpty || !symbolOrder.isEmpty else { return .null }
+        var items: [_JSON] = []
+        var seen = Set<_PlottableValue>()
+        for by in styleOrder {
+            seen.insert(by.value)
+            let symbol = symbolIndices[by.value].map { _chartSymbolPalette[$0 % _chartSymbolPalette.count] }
+            items.append(.object([
+                "label": .string(by.value.text),
+                "style": _chartColorPalette[styleIndices[by.value]! % _chartColorPalette.count]._json,
+                "symbol": symbol.map { .string($0) } ?? .null,
+            ]))
+        }
+        for by in symbolOrder where !seen.contains(by.value) {
+            items.append(.object([
+                "label": .string(by.value.text),
+                "style": Color.blue._json,
+                "symbol": .string(_chartSymbolPalette[symbolIndices[by.value]! % _chartSymbolPalette.count]),
+            ]))
+        }
+        let position: String = switch config.legendPosition {
+        case .top, .topLeading, .topTrailing: "top"
+        case .leading: "leading"
+        case .trailing: "trailing"
+        default: "bottom"
+        }
+        return .object(["position": .string(position), "items": .array(items)])
+    }
+}
+
+func _resolveChart(_ content: any ChartContent, config: _ChartConfig) -> _ResolvedChart {
+    var collector = _ChartCollector()
+    content._collectAny(into: &collector, modifiers: _MarkModifiers())
+    let marks = collector.marks
+    let resolver = _ChartResolver(marks: marks, config: config)
+
+    var items: [any View] = []
+
+    // Annotations, in mark order.
+    for mark in marks where !mark.modifiers.annotations.isEmpty {
+        let r = resolver.annotationRect(of: mark)
+        for annotation in mark.modifiers.annotations {
+            let resolved = annotation.position._resolved
+            items.append(_ChartItemView(
+                role: "annotation",
+                x0: r.x0, x1: r.x1, y0: r.y0, y1: r.y1,
+                position: resolved.position,
+                alignment: resolved.alignment ?? annotation.alignment,
+                spacing: annotation.spacing,
+                content: annotation.content
+            ))
+        }
+    }
+
+    let markJSON = resolver.outMarks(marks, includeMasks: true).map { _JSON.object($0.json) }
+    let xAxis = resolver.axisJSON(resolver.x, spec: config.xAxis, isX: true, items: &items)
+    let yAxis = resolver.axisJSON(resolver.y, spec: config.yAxis, isX: false, items: &items)
+
+    let props: _JSON = .object([
+        "marks": .array(markJSON),
+        "xAxis": xAxis,
+        "yAxis": yAxis,
+        "legend": resolver.legendJSON(config: config),
+    ])
+    return _ResolvedChart(props: props, items: items)
+}