September 26, 2022

Bootstrap5.0 Theme 구입

기록해두자. 처음 사보는 테마

먼가 무료버전 말고 사서 하는 것은 첨인데, 많은 공이 들어가 있는데 쓰는 기능은 한 20%정도일듯 😁


테마의 자세한 내용은 아래 링크로 방문해 보세요.

[

Phoenix – Admin Dashboard & WebApp Template

Phoenix is a in-house Bootstrap 5 premium quality free admin dashboard template. Enriched with effective features and attractive layouts.

ThemeWagonThemeWagon


](https://themewagon.com/themes/phoenix-admin-dashboard-webapp-template/?attribute_pa_license=multisite)

이런 회사에서는 외주 용역을 같이 수행한다고 하네요. 구매하면 마케팅 메일이 같이 날라와서 알게 되었어요. 동남아를 기반으로 하는 회사 같은데 잘 만드시네

September 26, 2022

PostgreSQL – update 시간 interval

현재 저장된 시간에서 몇 시간 앞으로 뒤로 빼거나 더하고 싶다면 interval 함수를 이용하세요.

몇 시간 되돌리기

시간만 되돌리기, 나머지는 그대로 두고 그냥 코드를 보자.

현재 저장 시간에서 한국 시차 적용을 잘못해서 다시 9시간을 뒤로 돌리는 코드

UPDATE public.testxapi_result SET starttime = starttime - interval '9 hours', endtime = endtime - interval '9 hours' where orderitem_id=315;SELECT * FROM public.testxapi_resultwhere orderitem_id=315ORDER BY id DESC LIMIT 100

특정 필드 날짜와 맞추기

**생성 날짜와 로그 기록 날짜가 다른 경우, 난감하다. 컴퓨터 시간이 틀렸거나 머 소스 쪽에서 그렇게 보내주면 어쩔 수 없다. 보정이 필요하다.**
날짜의 경우에는 시스템 시간을 쓰게 되므로, 좀 이성적인 시간으로 생각하고 분, 초 등의 정보는 남기고 날짜 부분만 바꾸고 싶다면.. 아래 예는 시간 정보까지 바꾸는 것임 (아래 코드의 hour 부분을 day 로 바꾸면 날짜까지만 바꿀 수 있다.)

함수가 딱 없어서 자기 필드에서 날짜를 싹 빼버리고, 그 부분을 다른 필드 값을 더해주는 형태로 구현했다. 짱똘을 좀 굴려야 😂

UPDATE public.testxapi_result SET starttime = starttime - date_trunc('hour', starttime) + date_trunc('hour', created_at), endtime = endtime - date_trunc('hour', endtime) + date_trunc('hour', created_at)where serial='00:08:DC:5E:B6:9C';-- orderitem_id= 200SELECT * from public.testxapi_result where serial='00:08:DC:5E:B6:9C';

결과는,


참고 사이트

[

9.9. Date/Time Functions and Operators

9.9. Date/Time Functions and Operators 9.9.1. EXTRACT, date_part 9.9.2. date_trunc 9.9.3. date_bin 9.9.4. AT TIME ZONE 9.9.5. Current Date/Time 9.9.6. Delaying …

PostgreSQL Documentation


](https://www.postgresql.org/docs/current/functions-datetime.html)

timestamp - interval → timestamp
Subtract an interval from a timestamp
timestamp '2001-09-28 23:00' - interval '23 hours' → 2001-09-28 00:00:00

September 21, 2022

JS – billboard 차트 라이브러리 써보기

#billboard.js #chart #js #라이브러리 #사용법

여러 개 찾아보다가, 좀 페이지가 덜 지저분하게 라인을 짧게 쓸수 있는 차트 라이브러릴 찾다가 빌보드차트를 건드려보기로 – D3 라이브러리 기반이라고 한다. d3js.org 도 참고하자.

홈페이지는 여기 : https://naver.github.io/billboard.js/

[

billboard.js

Re-usable easy interface JavaScript chart library, based on D3 v4+



](https://naver.github.io/billboard.js/)

간단한 사용법

아주 간단하게 쓰는 방법을 정리해 보자. 그런데 메인 페이지에서 이미 쉽게 정리해서 알려주고 있다.

Step 1. Load billboard.js and D3.js

D3 차트 라이브러리를 기반으로 하니깐, 이것을 따로 다운로드 받고 링크하고, billboard.js 를 가져와서 제대로 동작한다.

<!-- Step 1) Load D3.js --><script src="https://d3js.org/d3.v6.min.js"></script><!-- Step 2) Load billboard.js with style --><script src="$YOUR_PATH/billboard.js"></script><!-- Load with base style --><link rel="stylesheet" href="$YOUR_PATH/billboard.css"><!-- Or load different theme style --><link rel="stylesheet" href="$YOUR_PATH/theme/insight.css">                    

테마가 있으니깐 2~3개 정도 나는 datalab theme를 사용하기로 따라서, 내가 실제로 적용한 코드는 아래와 같다.

D3.js 는 버전 6에서 가장 최신을 다운로드 받았다. https://github.com/d3/d3/releases/tag/v6.7.0

<script src="{% static 'vendor/d3/d3.min.js' %}"></script><script src="{% static 'vendor/billboard/billboard.min.js' %}"></script><link rel="stylesheet" href="{% static 'vendor/billboard/datalab.min.css' %}">

Step 2. Setup your chart holder

차트를 넣고 싶은 html에 아래와 같이 코드를 추가하고,

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

Step 3. Generate a chart with options

<script>…</script> 사이에 아래 코드를 넣으면 짠 하고 차트가 등장한다.

var chart = bb.generate({    bindto: "#chart",    data: {        type: "bar",        columns: [            ["data1", 30, 200, 100, 170, 150, 250],            ["data2", 130, 100, 140, 35, 110, 50]        ]    }});

Step 4. 옵션 좀 추가

실제 내가 작성한 코드는 아래와 같다. 박스 완료 수량을 표기하는 건데, boxcount 에서 box_done 만큼 완료되었는지 표시하는 막대 차트를 만들어 보았다.

결과 모양은,


다 기본으로 쓰면 되지만, 일단

• title 추가해서 차트 위에 표기
• axis:{rotated: true,} 옵션으로 방향을 옆으로 보이게 수정
• x 축 라벨 이나 텍스트를 표기 안하도록 show:false 처리
• y 축 범위를 지정, max min 값 추가
• y 축 tick 에 count 지정해서 1 씩 기준 선이 보이도록 수정, 여기서 주의할 점은 max+1 값을 지정해 둔다는 것!
• y 축 숫자를 1씩 증가하면서 보여지도록 stepSize 값 지정
• y축 padding 지정하여 딱 붙여서 막대 그래프가 표현되도록 수정

var chart3 = bb.generate({    title: {        text: "완료수량 {{ box_done }} / {{ boxcount }}"    },    data: {    columns: [        ["박스완료",{{ box_done }}],    ],    type: "bar", // for ESM specify as: bar()  },  axis: {    rotated: true,    x: {        tick: {            show: false,            text: {                show: false            }        }    },        y: {        padding: {            top: 0,            bottom: 0        },        tick: {            count: {{boxcount}}+1,            stepSize:1,        },        max:{{boxcount}},        min:0    }  },  bindto: "#chart-container3"});

예제 제공 페이지

사실 예제를 보고 그냥 쉽게 따라할 수 있다. 그중에 나한테 맞는 걸 고르는 게 일이다.

[

billboard.js – examples

Examples of billboard.js. billboard.js is a re-usable easy interface JavaScript chart library, based on D3 v4+.

billboard.jsNAVER Corp.

](https://naver.github.io/billboard.js/demo/)