SpreadJS를 사용하면 데이터를 기반으로 동적 모양을 생성하여 모양 기능을 확장할 수 있습니다. 데이터 및 수식을 사용하여 사용자 정의 모양을 만들어 동적 모양 및 모양 값을 만들 수 있습니다. 동적으로 생성된 모양에는 여러 가지 사용 사례가 있습니다. 예를 들어, 각 기계의 상태를 보여주는 동적 제조/플랜트 라인을 만들고, 사용 가능한 공간을 보여주는 사무실 평면도를 구축하고, 서버 룸에있는 각 서버의 상태를 표시하는 등의 작업을 수행할 수 있습니다.

이 포스팅에서는 비행기 좌석 예약 애플리케이션의 비행기 좌석 차트에서 사용 가능한 좌석 중에서 선택하여 동적 모양을 활용하는 방법을 소개합니다. 수식을 사용하여 좌석 상태를 정의하는 값에 의해 각 모양의 색상이 결정됩니다.

데이터 중심 모양 소개

현재 SpreadJS에는 수많은 모양을 기본 제공하며, 요구사항에 따라 사용자 정의 모양을 만들 수도 있습니다. 현재 SpreadJS에 60개 이상의 모양을 기본 제공합니다. 데이터 기반 모양으로 스프레드시트를 작성하고 순서도, 대화 상자, 주석, 계층 데이터 등을 표시 할 수 있습니다. 아래 이미지는 SpreadJS가 기본 제공하는 모든 도형을 보여줍니다.

이러한 기본 제공 모양과 함께 필요에 따라 사용자 정의 모양을 만들 수도 있습니다. 셀의 데이터를 기반으로 모양을 동적으로 생성할 수 있습니다. 이제 동적으로 생성된 도형을 사용하여 대화형 좌석 예약 앱을 만들어 보겠습니다.

우선, 좌석 배치가 있는 항공기 이미지를 사용합니다.

1 단계. 좌석 배치를 위해 사용자 지정 모양을 만들어 항공기 좌석 위에 배치했습니다. 사용자 정의 모양을 만들기 위해 SVG 경로를 사용하여 모양으로 변환합니다.

var cmdMap = {
            moveTo: 'M',
            lineTo: 'L',
            bezierCurveTo: 'B',
            quadraticCurveTo: 'Q',
            arc: 'A',
            arcTo: 'AT',
            closePath: 'Z'
        };
        var spread;
        var sheet;
        var sheetData;
        var selectedSeatsArray = [];
        // convert svg points to shape path
        function pointsToPath(points) {
            var ps = points.split(' ');
            var mx = 10000; // shift the shape to (0, 0)
            var my = 10000;
            ps = ps.map(function (p) {
                var t = p.split(',');
                if (parseFloat(t[0]) < mx) {
                    mx = parseFloat(t[0]);
                }
                if (parseFloat(t[1]) < my) {
                    my = parseFloat(t[1]);
                }
                return { x: parseFloat(t[0]), y: parseFloat(t[1]) };
            });

            var cmds = [];
            cmds.push(['M', ps[0].x - mx, ps[0].y - my]);

            for (var i = 1; i < ps.length; i++) {
                cmds.push(['L', ps[i].x - mx, ps[i].y - my]);
            }

            cmds.push(['Z']);

            return [cmds];
        }

2 단계. 코드에서 SVG 경로를 모양 경로로 변환합니다.

        function convertPath(d) {
            var cmds = parser.parse(d);
            var mx = 10000; // shift the shape to (0, 0)
            var my = 10000;

            var pathCommands = cmds.map(function (cmd) {
                for (var i = 0; i < cmd.args.length; i = i + 2) {
                    if (cmd.args[i] < mx) {
                        mx = cmd.args[i];
                    }
                    if (cmd.args[i + 1] < my) {
                        my = cmd.args[i + 1];
                    }
                }
                return [cmdMap[cmd.type]].concat(cmd.args);
            });

            var ret = [];
            var t = [];
            for (var i = 0; i < pathCommands.length; i++) {
                var cmd = pathCommands[i];
                for (var j = 1; j < cmd.length; j = j + 2) {
                    cmd[j] = cmd[j] - mx;
                    cmd[j + 1] = cmd[j + 1] - my;
                }
                t.push(cmd);
                if (cmd[0] == 'Z') {
                    ret.push(t);
                    t = [];
                }
            }
            return ret;
        }

3 단계. 원하는 관련 위치에 사용자 정의 모양을 추가하기 위해 Spread.Sheets의 shapes 컬렉션의 'add '메소드를 호출합니다.

var s1shape = createShape(s1commands, shapeleft, shapetop, shapewidth, shapeheight, seatNum);
var ret2 = sheet.shapes.add(seatNum, s1shape);

4 단계. 위 코드에서 createShape 메소드는 주어진 위치, 크기 및 스타일에 따라 모양을 만듭니다. 이 기능은 다음과 같습니다.

function createShape(serverpathCommands, sleft, stop, swidth, sheight, shapename) {
            var ret = 0;
            var shapecolorret = -1
            var servermodel = {
                name: shapename,
                left: sleft,
                top: stop,
                width: swidth,
                height: sheight,
                angle: 0,
                options: {
                    fill: {
                        type: GC.Spread.Sheets.Shapes.ShapeFillType.solid,
                        color: shapeFormula
                    },
                    stroke: {
                        type: GC.Spread.Sheets.Shapes.ShapeFillType.solid,
                        color: shapeFormula
                    },
                    textFormatOptions: {
                        allowTextToOverflowShape: false,
                        wrapTextInShape: false,
                        font: '="11px Arial"',
                        fill: {
                            type: GC.Spread.Sheets.Shapes.ShapeFillType.solid,
                            color: 'black'
                        }
                    }
                },
                path: serverpathCommands
            };
            return servermodel;
        }

5 단계. 좌석 보기를 제외하고 앱에는 좌석을 선택하는 기능이 있습니다. 처음에 시트에 0과 2 사이의 임의 생성된 숫자가 로드됩니다. 그런 다음 숫자는 아래 공식을 사용하여 해당 값을 기반으로 색상을 반환하도록 자동으로 계산됩니다.

녹색(값 0)은 좌석을 사용할 수 있음을 나타냅니다. 빨간색(값 1)은 좌석이 이미 예약되었음을 나타냅니다. 주황색(값 2)는 프리미엄 좌석임을 나타냅니다. 이 색상은 다른 시트의 데이터를 사용하여 수식으로 생성됩니다.

모양의 색상을 지정하는 데 사용되는 수식은 다음과 같습니다.

var shapeFormula = "=CHOOSE(VLOOKUP(name,Sheet2!A1:B186,2,False)+1, \"green\", \"red\", \"orange\")";

Spread.Sheets 내에서 모양으로 생성된 페이지 뷰는 다음과 같습니다.

또한 이 앱에서, 사용자와 좌석의 상호작용을 다음과 같은 방식으로 처리했습니다.

1. 녹색 좌석(사용 가능)를 클릭하면 : 좌석 색상이 빨간색으로 변경되고 비행기 모양 옆에 선택된 좌석 번호가 표시됩니다.
   
   
2. 빨간색 좌석(예약됨)을 클릭하면 : 좌석이 이미 예약되었다는 메시지를 표시하는 대화 상자가 나타납니다.
   
   
3. 주황색 좌석(프리미엄)를 클릭하면 : 좌석이 프리미엄 시트임을 알리는 확인 대화 상자가 표시됩니다. "업그레이드 하시겠습니까?"에 대해 사용자가 "예"를 클릭하면 프리미엄 좌석이 선택되고 좌석 색상이 빨간색으로 변경되며, 비행기 모양 옆에 선택한 좌석 번호가 표시됩니다.

위의 내용과 이 포스팅의 주요 목적은 시트2의 좌석 값을 업데이트하는 것만으로도 좌석 색상이 자동으로 변경된다는 것입니다. 우리가 정의한 수식은 이러한 변화를 자동으로 처리합니다. 이를 통해, 수식과 데이터를 사용하여 모양 속성을 처리하는 것이 강력하고, 유연하다는 것을 알 수 있습니다.

비행기 좌석 선택 앱의 최종 결과는 아래와 같습니다.

기능을 더 잘 이해하기 위해 샘플 응용 프로그램을 다운로드할 수 있습니다.

모양과 수식을 만들고 다양한 위치에서 가져올 수 있는 데이터를 기반으로 값을 동적으로 조정하는 방법에 대한 간략한 소개입니다. 이러한 개념을 활용하여 자신만의 맞춤형 데이터 중심 애플리케이션에 적용할 수 있을 것입니다.