# SSH.js
<small> Super SVG Helper, so called SSH is a SVG library, makes easy to handle and modify svg elements in your web project.</small>

## 기능과 특징
> <strong>SVG와 HTML DOM 요소를 쉽게 생성하고 속성을 변형하여
화면에 적용할 수 있는 모듈</strong>로서 데이터 시각화를 편리하게 구성하도록 한다.

#### collaborators
| 팀원 | 아이디 |
| -------- | -------- |
|전예진 | [pikpokjeon](https://github.com/pikpokjeon)|
| 현| [ Aiden-leee](https://github.com/Aiden-leee)|
| 김진희| [ dev-jinheekim](https://github.com/dev-jinheekim)|

---
## 차트 프로젝트

| 토픽 | 규칙 | 레퍼런스 |
| -------- | -------- | -------- |
|1. 스터디 방법 |- 각자 맡은 토픽에 따른 설명과, 부가 코트를 작성합니다. <br /> - 다음 회의까지 각 대분류 토픽의 폴더에 마크다운으로 작성한 결과물을 제출합니다.|```파일명: [토픽이름]---[이름] ```<br /> ``` 위치: /agenda/chart/파일명.md``` <br />토픽 : 차트 초기정의 <br /> 설명: ... <br /> 코드: 1. ... 2. ... |
|2. 토픽 설명 | - 비교 가능한 코드가 있다면 어떤 차이점이 있는지 서술합니다<br /> - 이해를 돕기위한 코드조각을 첨부합니다|
|3. 회의 방법 |- 매주 한번 온라인 미팅을 통해 각자 준비한 코드를 화면공유를 통해 리뷰하는 시간을 갖습니다. <br />- 유닛 테스트 툴을 사용하셔도 좋습니다. 함수가 작동하는 것을 보여주세요. |플랫폼: gather.town <br /> 방식: 화면공유로 정리한 내용을 발표하고, JS 런타임 환경에서 함수가 작동하는 것을 시연합니다. <br /> |
| 4. 마지막 단계 | - 회의 마지막 단계에, 자신이 가장 자신있는 토픽을 선택합니다.<br /> | svg 요소 생성 함수 코드짜기..|
---

## List to study
- [ ] 시작 날짜
- [x] 완료 시 체크
### [ ] 1. 차트에 필요한 요소
- [x] 6월 6일

- chart

기능
- 그리드 ( 가로/ 세로 )
- 레전드
- 초기 로딩 애니메이션
- 제로라인(음수포함)

포맷
- 날짜 (yyyy-MM-dd, yy/mm/dd, mm/dd ...)
- 숫자 단위 (1K, 10M, 10B, 원, $, USD...)
숫자 소수점 단위

- Bar
option
- stacks :
- Y축에 해당하는 데이터의 절대값으로 표시
- Y축 전체를 기준으로 데이터의 상대값을 표시

기능
- stacks 절대값 / 상대값 표현
- stack 영역 마우스 호버 ( 해당 영역 포커스 )
- 툴팁: 해당 영역 bar 데이터 정보
- 툴팁 호버
- 전체 툴팁 표시
- 선 호버
- 선 영역 구분표시

- Line ( path )
- curves
- stacks
- arcs

### [ ] 2. 차트 정의 방식
- [ ] 6월 18일

#### 정의
- 차트를 만든다. 문서가 없어도 사용가능할 정도로 직관적이고 일관성있게 만든다.
- x축과 y축의 데이터 갯수는 일치해야한다.
- 차트 옵션은 stacked, percentage가 있다.
- 툴팁은 formatter를 이용하여 값을 전달받아 커스터마이징이 가능하다.
- 레전드, 툴팁, 그리드 등의 스타일은 기본 스타일로 우선 제공한다.
+ 데이터 변경을 위한 함수 추가가 필요함.

xAxis = ['2021-06-01', '2021-06-02', '2021-06-03', '2021-06-04', '2021-06-05'];

chartOptions = {
    title: {
        text: '판매량',
    },
    series: [
        {
            type: 'line || bar',
            legend: '사과',
            values: {
                x: xAxis,
                y: [10, 20, 30 , 40, 10],
            },
        },
        {
            type: 'line || bar',
            legend: '바나나',
            values: {
                x: xAxis,
                y: [15, 25, 35 , 45, 15],
            },
        },
        {
            type: 'line || bar',
            legend: '딸기',
            values: {
                x: xAxis,
                y: [1, 2, 3 , 4, 1],
            },
        },
    ],
    axis: {
        x: {
            name: '과일의 종류', // 축 이름
        },
        y: {
            name: '판매개수', // 축 이름
            labels: '{value}개', // 레이블 커스터마이징
        },
    },
    options: {
        stack: true,
        percent: true,
        tooltip: {
            formatter: (value) => { return customValue; }, // 툴팁 커스터마이징
        },
    },
}

chart.init(chartOptions);

#### 요소 생성
예시

const svg = ssh.create('svg')
    .attr({ height, width, viewbox: `0 0 ${ width } ${ height } ` }).toChart

const bar = ssh.group('name').create('rect').type('histogram')
const line = ssh.group('name2').create('path').type('curve')

const axis = svg.group('axis').axis({ x: ['cost', { visibility: 'hiddne' }], y: ['price', { color: 'red' }] })


const chart1 = svg.appendAll(bar)
    .data('legendTitle1', [{ x: 'A', y: 1 }, { x: 'C', y: 2 }])
    .attr({ background: 'red' })
    .animate({})

const chart2 = svg.appendAll(line)
    .data('legendTitle2', [{ x: 'B', y: 3 }, { x: 'A', y: 4 }])

### [ ] 3. 차트 정의 객체에 필요한 요소생성
- [ ] 6월 18일

* 차트에 필요한 html요소
* 차트에 필요한 svg요소
* 엘리먼트에 속성으 부여하는 함수
* 엘리먼트를 생성하는 함수
* 차트 구성에 필요한 데이터
* 차트 요소 생성에 필요한 함수

### [ ] 4. HTML요소 생성
* 사전에 필요한 html요소를 동적으로 생성

### [ ] 5. SVG요소 생성
- 차트에 필요한 SVG요소를 생성하는 함수
- 생성된 SVG에 속성을 부여하는 방법

### [ ] 6. 차트에 필요한 함수
- [ ] 동적 데이터에 따른 x/y좌표 path를 만들어주는 함수

-
### Commit Convention

      [ keyword ] : 커밋 내용 (파일이름)
      keywords : 
                  docs : 문서화,
                  style : 스타일 관련,
                  build : 빌드와 배포,
                  fix: 에러 수정,
                  feature: 기능 추가,
                  refactor: 코드 개선

- [x] 첫 회의

| Column 1 | Column 2 | Column 3 |
| -------- | -------- | -------- |
| Text | Text | Text |

### 필요한 기능 - 아이디어
>목적은 SVG와 HTML DOM 요소를 쉽게 생성하고 속성을 변형하여
화면에 적용할 수 있는 모듈을 만드는 것'

## 차트
### 1. 유형

- chart

기능
- 그리드 ( 가로/ 세로 )
- 레전드
- 초기 로딩 애니메이션
- 제로라인(음수포함)

포맷
- 날짜 (yyyy-MM-dd, yy/mm/dd, mm/dd ...)
- 숫자 단위 (1K, 10M, 10B, 원, $, USD...)
숫자 소수점 단위

- Bar
option
- stacks :
- Y축에 해당하는 데이터의 절대값으로 표시
- Y축 전체를 기준으로 데이터의 상대값을 표시

기능
- stacks 절대값 / 상대값 표현
- stack 영역 마우스 호버 ( 해당 영역 포커스 )
- 툴팁: 해당 영역 bar 데이터 정보

-Line ( path )
- curves
- stacks
- straight

기능
- 툴팁 호버
- 전체 툴팁 표시
- 선 호버
- 선 영역 구분표시

### 2. 기능정리

* 차트는 바 와 라인을 지원한다.
* 바와 라인은 같이 사용할 수 있어야 한다.
* 바와 라인은 스택 옵션을 가진다.
* 인터렉션은 호버시 툴팁 띄우기, 호버시 축선 표시, 레전드 클릭시 해당 데이터 토글을 구현한다.
* 기본 요소 스타일 커스터마이징 옵션은 추후 적용이 가능하도록 고려하거나 테마로 기본적으로 적용한다.

## Using SSH.js

### 1. Chart Helper

#### 공통 기능

- 타입에 따른 Path 계산
- 유저 데이터를 이용한 X, Y 좌표 계산
- svg 요소 생성 및 속성 변경
- svg 요소에 사용자 이벤트 적용

#### Collaborators
#### 현님
---
- Init attribute 정의

{
    type: bar, // ["bar", "line" ...] 차트 타입 
    title: {
        text: "차트 제목",
        color: "차트색상",
        fontSize: "14px"
    },
    height: "차트 높이",
    width: "차트 넓이",
    layout: {
        padding: "10px", // 차트 컨테이너 padding 값
    },
    tooltip: {
        handler: "hover",
    },
    xAxisLabel: {
        display: true,
        text: "x축의 타이틀"
    },
    yAxisLabel: {
        display: true,
        text: "y축의 타이틀"
    },
    chartData: {
            labels: ['Jan', 'Feb', ...],
            legend: {
                display: true,
                position: "top"
            }
            datasets : [
                {
                    legend: "레전드 이름",
                    backgroundColor: "색상",
                    borderColor: "색상",
                    textColor: "색상",
                    data: [0, 10, 5, 2, 20, 30, 45],    
                }
            ]
        }    
    ],
    
    
}

#### 예진님
---
- 차트 타입에 따른 필요한 svg 요소 정의

{
    bar: {
        rect: {
            id: ['r-1', 'r-2', 'r-3'], // 데이터 갯수에 따라 id 생성
            name: 'data-rect',
            attribute: {
                "datasets의 style 속성"
            }
        },
        text: {
            id: ['title','xAxisLabel','yAxisLabel','legend']
            name: 'text',
            attribute: {
                "초기 설정의 textColor 속성들"
            }
        },
        line,
    },
    
    line: {
        path,
        text,
        line
    
    }
}

---
- 초기 차트 속성으로 svg 객체를 생성하고 스토어에 저장

const initChart = (data) =>
{
    for (const [title, value] of Object.entreis(data))
    {
        // 요소 생성함수 사용
        // title: Text 요소
        // height/ width: root svg 사이즈
        // x,y labels: Text 요소
        // chartData
    }
}

---
- 초기 정의된 SVG 리스트 객체의 개별 요소를 생성

/**
* @type svg요소 타입 (string)
* @attr svg요소 속성 (obj)
*/
const genElement = (type, attr) =>
{

    type = document.createElementNS('http://www.w3.org/2000/svg', type)

    for (const [title, value] of Object.entries(attr))
    {
        type.setAttributeNS(null, title, value)
    }

    return type

}


// svg 생성 사용예시
const svg = genElement("svg", {width: 1300 , height: 700} )

---
### 현님
### 차트 옵션 & 기능

bar chart
https://www.amcharts.com/demos/simple-column-chart/

차트 생성을 할 대상 DOM 작성

<div id="ssh-chart"></div>

차트 생성 호출

// sshChart(id, chartType);
let chart = sshChart("#ssh-chart", "bar");

#### 차트
- 차트 배경색
- padding, margin
- stacked (default: false)
- stacked 일경우 꽉 채워보이기 활성화

#### x축
- title (x축의 제목)
- title color
- title size
- title font-weight
- x축의 그리드 두께
- x축의 그리드 색상 및 투명도
- text color size weight
- 제로라인 (음수-양수)
- grid disabled (default: false)

#### y축
- title (x축의 제목)
- title color
- title size
- title font-weight
- y축의 그리드 두께
- y축의 그리드 색상 및 투명도
- text color size weight
- 제로라인 (음수-양수)
- grid disabled (default: false)

#### 차트 레전드
- 위치 (position)
- 레전드 크기 ( width, height )
- 형태 (border-radius, line, round, image..)
- stroke 크기 (border)
- 레전드 색상 (background)
- 글자 색상 (font color)
- 글자 크기 (font size)
- max-width (긴 텍스트의 경우 ...잘려야함)
- click 활성화 (default: true)

#### 차트 커서
- xy 커서 활성화 (defulat: false)
- lineX, lineY
- line 색상
- line 크기
- line 투명도 및 dash style
- 축 값 hover 활성화 (default: false)
- 축 값 hover style

#### tooltip
- 툴팁 활성화 (default: false)
- 배경색상
- 텍스트 색상
- 텍스트 크기
- margin, padding
- 툴팁박스 크기

#### 포맷
- 날짜 (yyyy-MM-dd, yy/mm/dd, mm/dd ...)
- 숫자 단위 (1K, 10M, 10B, 원, $, USD...)
- 숫자 소수점 단위

---
### 진희님

## 차트 기본 요소

* 차트 제목
* 차트
* 범례
* 축 제목
* 축 레이블
* 눈금
* 눈금선

## 차트 유형 

[차트종류14종알아보기](https://www.finereport.com/kr/%EC%B0%A8%ED%8A%B8-%EC%A2%85%EB%A5%98-14-%EC%A2%85-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0/)

* 히스토그램 : x축이 의미있는 데이터
* 막대그래프 (바차트) : 데이터간 차이를 나타낼 때 유용
* 원 그래프 (파이차트) : 비례 관계를 백분률로 보여줄때 사용.
* 꺾은선 그래프 (러안처트) : 증가폭, 성장치 표현에 적합. 많은 양의 데이터의 추세를 나타낼때 유용
* 산점도
* 버블차트
* 방사형 그래프
* 깔때기 도표
* 워드 클라우드 차트
* 간트 차트 (funnel plot)
* 지도/맵
* 열지도 (heatmap)

### 차트에 필요한 기능

* 기본 요소 표시 여부 설정
* 기본 요소의 커스터마이징 가능 여부와 기능 (위치, 색상, 호버나 클릭 대응)
* 차트 유형 설정 
* 마우스 오버시 나타나는 축선 가이드, 툴팁

---
### 예진님


- bar 차트 legend가 여러개 (다중 차트)인 경우 표현
- bar 차트 영역 선택시 isFocusHover 해당 영역 포커스
- 라인 차트에서 툴팁 호버
- 라인 차트 구간 표시
- 최대 최소값 고정/ 동적으로 표시

#### type ( line: curve, stack, arc), bar

const chart1 = {
    title: 'title' ,
    type: 'bar',
    data: [1,2,3],
    label: [2010,2011,2012],
}

const chart2 = {
    title: 'title' ,
    type: 'line',
    data: [5,6,1],
    label: [2010,2011,2012],
}

// 각각 차트에 따라 혹은 공용으로 사용가능
const style1 = {
    chart: {
        color: 'red', //바, 선 색상
        border: 'white', // 선차트에서는 무시
        plot: 'red,
    },
    font: {
        size: 14,
        color: 'white' // 명시하지 않으면 theme에 따른 디폴트 색상으로
    }
}

// 옵션은 한번만 사용
const option = {
      size: {
        width: 1300, // 꼭 픽셀? 뷰포트 상대 사이즈사용
        height: 700,
    },
    legend: true,
    grid:{
    
    },
    isTooltip:true,
    isTooltipBox:true,
    isFocusHover: true,
    isHoverAfter: true,
    theme: 'dark' // 다크모드, 등 theme 사용
}

const charts = [
    {
        chart: chart1,
        style: style1,
    },
      {
        chart: chart2,
        style: style1,
    }
]

// 초기 함수에서 사용
initChart(option,charts)

module.exports = {charts} // 객체만 넘길 시

---

- [ ] 둘째 회의

## 6월 6일

## 예진

1. 이뤄야 할 것
- DOM 조작
svg와 html DOM을 편리하게 구성할 수 있는 조작 함수를 생성
엘리먼트를 생성
엘리먼트 속성을 부여
엘리먼트에 이벤트를 부여
엘리먼트로 DOM 트리를 구성

- 플러그인
데이터 필터
포맷 - 날짜, 숫자단위, 가격단위
숫자 필터 - 최소, 최대, 평균, 일정 범위 내의 커스텀 계산
이터러블 - 위와 같음
오브젝트 - 키와 밸류 값을 분리하여 적용(차트 예시로 키는 라벨 밸류는 데이터)

2. 차트를 만들 수 있는 구성
- 1. 필요한 데이터
- 차트 타입에 필요한 svg 요소
- 각 svg 요소별 속성, 이벤트, 스타일
- 차트 x / y축 필요한 데이터(객체 배열)

- 2. 필요한 기능 / 이벤트
- 차트에 데이터를 표시하는 부분이 전체에서 절대값 / 상대값으로 표현
- 위의 방식에 따른 그리드의 위치 변화를 다르게.세로 / 가로 표현
- 데이터의 시각적 요소(예: 차트의 바, 라벨, 데이터 텍스트)에 마우스 호버시 포커스
- 데이터의 시각적 요소를 이용해 최소, 최대, 평균 과 같은 데이터를 재 시각화 / 툴팁박스 / 레전드에 표현
- 데이터 구간 선택시 구간에 대한 정보만 툴팁에 표시

const svg = ssh.create('svg')
    .attr({ height, width, viewbox: `0 0 ${ width } ${ height } ` })

const bar = ssh.group('name').create('rect').type('histogram')
const line = ssh.group('name2').create('path').type('curve')

const axis = svg.group('axis').axis({ x: ['cost', { visibility: 'hiddne' }], y: ['price', { color: 'red' }] })


const chart1 = svg.appendAll(bar)
    .data('legendTitle1', [{ x: 'A', y: 1 }, { x: 'C', y: 2 }])
    .attr({ background: 'red' })
    .animate({})

const chart2 = svg.appendAll(line)
    .data('legendTitle2', [{ x: 'B', y: 3 }, { x: 'A', y: 4 }])

const option = {
    grid: ['x'],
    data: 'relative',
    tooltip: [chart2],
    hover: {
        tooltipBox: {
            data: ['avg', 'max', 'min'],
            chart: [chart1, chart2]
        }
    },
    click: {
        focus: {
            chart: [chart2]
        }
    }
}

// svg.toChart()

## 진희

* 제작 방향 : 최소한의 설정으로 차트를 만든다. 문서가 없어도 사용가능할 정도로 직관적이고 일관성있게 만든다.
* x축과 y축의 데이터 갯수는 일치해야한다.
* 차트 옵션은 stacked, percentage가 있다.
* 툴팁은 formatter를 이용하여 값을 전달받아 커스터마이징이 가능하다.
* 레전드, 툴팁, 그리드 등의 스타일은 기본 스타일로 우선 제공한다.
* 데이터 변경을 위한 함수 추가가 필요함.

xAxis = ['2021-06-01', '2021-06-02', '2021-06-03', '2021-06-04', '2021-06-05'];

chartOptions = {
    title: {
        text: '판매량',
    },
    series: [
        {
            type: 'line || bar',
            legend: '사과',
            values: {
                x: xAxis,
                y: [10, 20, 30, 40, 10],
            },
        },
        {
            type: 'line || bar',
            legend: '바나나',
            values: {
                x: xAxis,
                y: [15, 25, 35, 45, 15],
            },
        },
        {
            type: 'line || bar',
            legend: '딸기',
            values: {
                x: xAxis,
                y: [1, 2, 3, 4, 1],
            },
        },
    ],
    axis: {
        x: {
            name: '과일의 종류', // 축 이름
        },
        y: {
            name: '판매개수', // 축 이름
            labels: '{value}개', // 레이블 커스터마이징
        },
    },
    options: {
        stack: true,
        percent: true,
        tooltip: {
            formatter: (value) => { return customValue; }, // 툴팁 커스터마이징
        },
    },
}

chart.init(chartOptions);

## 현

#### 차트
최소한의 설정으로 차트를 만들수 있어야하고 라이브러리를 사용하는 사용자가 쉽게 사용 할수 있어야 한다.
확장성을 고려하여 개발

#### 차트의 요구사항
javascript 및 svg 지원해야함 ie 9 이상
차트를 그릴 html DOM 필수
차트 유형 필수 입력
차트 속성 미입력시 default 로 적용
객체 형태로 데이터 전달
차트 데이터 형태

data = [
    {
        “date”: “10-01”,
        “population”: 240
    },
    {
        “date”: “10-02”,
        “population”: 550
    },
    {
        “date”: “10-03”,
        “population”: 950
    }
]

#### 항목
value와 category를 설정
레전드, 툴팁, 그리드, default 스타일
변경은 chartOptions 를 객체 형태로 전달

#### 차트 유형
컬럼,라인 차트

#### 차트의 옵션 기능
format - 날짜, 숫자단위, 가격단위
legend - 범례
tooltip - 마우스 오버시 나오는 툴팁 박스
grid - 기본 라인 디자인
컬럼차트 - stacked 유형
라인차트 - curve, step, point

chartOptions = {
	title: {
		text: ‘테스트’
	},
	series: [
               { 
			type: 'line',
		  	value: ‘population’,	
			category: ‘date’,
			title: ‘text’,
			
		},
		{ 
			type: 'bar',
		  	value: ‘other’,	
			category: ‘item’,
			title: ‘text’
		},
    	],
	event: {
		legend: [
			display: true,
		],
		tooltip: [
			display: true,
		],
		cursor: [
			display: true
		]
	}
}

SSH(data, chartoptions);

## 진희

## 작업 쪼개기

### 축

* series 로 받은 데이터를 기준으로 x, y 축의 max 값을 계산한다.
* x, y축을 만들고 레이블을 표시한다.
* x 축에 따른 index 값 계산

### 눈금과 눈금선

* x, y 값을 기준으로 적정한 간격을 계산한다. (적정한 간격의 정책 정의 필요)
* 눈금, 눈금선을 표시한다.
* 눈금선에 해당하는 축의 값을 표시한다.

### 차트

* 라인
  * 데이터에 해당하는 값의 불릿 표시한다.
  * 데이터 간의 연결 션을 표시한다.

* 바
  * 데이터에 해당하는 값의 바를 표시한다.

### 옵션 만들기

* 스택
* 퍼센트

### 액션 만들기

* 호버시 툴팁
* 호버시 그리드
* 데이터 변경 대응

const data = [
    {
        “date”: “10-01”,
        “population”: 240
    },
    {
        “date”: “10-01”,
        “population2”: 140
    },
    {
        “date”: “10-02”,
        “population”: 550
    },
    {
        “date”: “10-03”,
        “population”: 950
    }
]

const chartOptions = {
    title: {
        text: '판매량',
    },
    series: [
        {
            type: 'line || bar',
            value: ‘population’,
            category: ‘date’,
        },
        {
            type: 'line || bar',
            value: ‘totalSales’,
            category: ‘date’,
        },
    ],
    options: {
        event: {
            tooltip: [
                display: true, // default false
                formatter: (value) => { return customValue; }, // 툴팁 커스터마이징
            ],
            cursor: [
                display: true // default false
                format: ['vertical', 'horizontal', 'cross']
            ]
        },
        // size: {width: 1500, height: 750}, 스크립트로 함수에 사이즈 가져옴 HTML으로 사이즈 정함
        responsive: true,
        legend: true,
        subType: bar 이면 stack, line 이면 curve, stack, straight,
        percent: true, // 절대값/ 상대값 표시
    },
}

Chart.init(data, chartOptions)