Vega, Vega-Lite 관련 질문

[f24b83985b804d90965e (Ellis.K.Issac)]

안녕하세요
그래프를 특수한 목적으로 표현하기위해서 Vega-lite를 사용해서 개발중에 있습니다.

#. 데이터의 형태
Logstash config file 로 본 데이터의 형태는 아래와 같습니다.

columns => ["Time","PWM1","PWM2","PWM3","PWM4"]
mutate{convert=>["PWM1", "integer"]}
date{
    match => ["Time", "yyyy-MM-dd HH:mm:ss SSS"]
    target => "Time"
}

#. Vega-Lite
제가 작성하고 나온 결과는 아래와 같습니다.

{
  $schema: "https://vega.github.io/schema/vega-lite/v2.json"
  mark: line
  data: {
    url: {
      %context%: true
      %timefield%: Time
      index: templog_mapp
      body: {
        size: 10000,
        _source: ["Time", "PWM1", "PWM2", "PWM3", "PWM4"]
      }
    }
    format: { property: "hits.hits" },
  }
  transform: [
    {
      calculate: "toDate(datum._source.Time)",
      as: "time"
    }
    {
      calculate: "datum._source.PWM1"
      as: "pwmCh1"
    }

    {
      calculate: "datum._source.PWM2 + (2 * 1)"
      as: "pwmCh2"
    }

    {
      calculate: "datum._source.PWM3 + (2 * 2)"
      as: "pwmCh3"
    }

    {
      calculate: "datum._source.PWM4 + (2 * 3)"
      as: "pwmCh4"
    }
  ]
  encoding: {
    x: { field: time, 
      type: temporal
      axis: { title: false }
    }
  }

  "layer": [
    {
      "mark": {
        "type": "line",
        "interpolate": "step-after"
      },
      "encoding": {
        "y": {
          "field": "pwmCh1", 
          "type": "quantitative"
        }
      }
    }
    {
      "mark": {
        "type": "line",
        "interpolate": "step-after"
      },
      "encoding": {
        "y": {"field": "pwmCh2", "type": "quantitative"},
      }
    }
    {
      "mark": {
        "type": "line",
        "interpolate": "step-after"
      },
      "encoding": {
        "y": {"field": "pwmCh3", "type": "quantitative"},
      }
    }
    {
      "mark": {
        "type": "line",
        "interpolate": "step-after"
      },
      "encoding": {
        "y": {"field": "pwmCh4", "type": "quantitative"},
      }
    }
  ]
}

원하는 기능은 다음과 같습니다.

1. 그래프 색깔 및 범례 변경
   그래프에 색깔을 넣을려고 color를 각 y축에 넣어도 undefined로만 추가되지 색을 넣을 수 가 없습니다.

2. x축 시간단위
   Zoom in, Zoom out에 따라 단위가 자동으로 ms까지 변경되는 기능이 필요합니다.

3. 변수 추가 및 스크롤 바
   작성된 Vega 코드를 보면
   {
   calculate: "datum._source.PWM2 + (2 * 1)"
   as: "pwmCh2"
   }
   왼쪽 (2 * 1)의 "2" 라는 상수 대신,
   거기에 변수를 넣고 슬라이드바로 조정을 하고 싶습니다.
   그게 안된다면 버튼으로 겹쳐보기, 나눠보기를 스위칭 되게끔 변경하는 기능이 필요합니다.

감사합니다.